CSS Display property

how to usedisplayProperties in CSS

ThisdisplayThe properties of the object determine how the browser renders it.

This is a very important attribute, and probably the attribute with the largest number of values you can use.

These values include:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table(And alltable-*Those ones)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

Plus other content that you are unlikely to use, such asruby.

Choosing any of these options will greatly change the behavior of the browser with the element and its children.

In this article, I will analyze the most important content not covered elsewhere:

  • block
  • inline
  • inline-block
  • none

I introduced others in other posts:

inline

Inline is the default display value of each element in CSS.

Except for some elements, all HTML tags are displayed inline out of the boxdiv,pwithsection, They are set toblockProvided by the user agent (browser).

No margins or padding are applied to inline elements.

The height and width are the same.

youwere ableAdd them, but the appearance on the page will not change-they are automatically calculated and applied by the browser.

inline-block

asinline, butinline-block widthwithheightWill be applied in the way you specify.

block

As mentioned earlier, some elements are usually displayed in-line, but some elements are excluded, including

  • div
  • p
  • section
  • ul

Set asblockThrough the browser.

withdisplay: block, The elements are stacked vertically on top of each other, and each element occupies 100% of the page.

Assigned towidthwithheightIf you set attributes, they will also be respectedmarginwithpadding.

none

usedisplay: noneMake the element disappear. It still exists in HTML, but it is not visible in the browser.

Download mine for freeCSS Manual


More CSS tutorials: