The CSS Display property

The display property of an object determines how it is rendered by the browser.

It’s a very important property, and probably the one with the highest number of values you can use.

Those values include:

• block
• inline
• none
• contents
• flow
• flow-root
• table (and all the table-* ones)
• flex
• grid
• list-item
• inline-block
• inline-table
• inline-flex
• inline-grid

plus others you will not likely use, like ruby.

display now also accepts two keywords, an outer type and an inner type: display: inline flex is inline-flex, block flow is block, inline flow-root is inline-block. That works in Chrome 115, Firefox 70 and Safari 15. The single keywords still work. The spec form for an inline list item is display: inline list-item.

Choosing any of those will considerably alter the behavior of the browser with the element and its children.

In this post I’ll analyze the most important ones not covered elsewhere:

• block
• inline
• inline-block
• none

I cover others in separate posts:

• table in the Tables guide
• flex in the Flexbox guide
• grid in the CSS Grid guide

inline

Inline is the default display value for every element in CSS.

All the HTML tags are displayed inline out of the box except some elements like div, p and section, which are set as block by the user agent (the browser).

Inline elements do get horizontal margin, padding and borders. Those push content left and right. Vertical padding and borders paint, but they do not move the surrounding lines. Vertical margins, width and height are ignored. The CSS box model post covers how that sizing works.

inline-block

Similar to inline, but with inline-block width and height are applied as you specified.

block

As mentioned, normally elements are displayed inline, with the exception of some elements, including

• div
• p
• section
• ul

which are set as block by the browser.

With display: block, elements are stacked one after each other, vertically, and every element takes the full width of its containing block (its parent).

The values assigned to the width and height properties are respected, if you set them, along with margin and padding.

none

Using display: none makes an element disappear. It’s still there in the HTML, but just not visible in the browser.

Want me to talk about your product? You can sponsor this site.