The display property in CSS plays a crucial role in determining how an object is rendered by the browser. Understanding this property is essential as there are numerous values one can use. Some of the commonly used values for display include:

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

While there are other values like ruby that are less commonly used, this article will focus primarily on the importance and usage of the following values:

  • block
  • inline
  • inline-block
  • none

Values such as table (covered in the Tables guide), flex (covered in the Flexbox guide), and grid (covered in the CSS Grid guide) will be discussed separately in their respective articles.

Inline Elements (Default - inline)

By default, all HTML tags are displayed as inline, except for certain elements like div, p, and section which are set to block. Inline elements do not have any margin, padding, height, or width applied to them. While it is possible to add them, these styles do not affect how the element appears in the page, as the browser automatically calculates and applies these values.

Inline Block (inline-block)

Similar to inline, but with inline-block, the specified width and height are applied to the element. This allows for more control over the size of the element compared to the default inline display value.

Block (block)

In contrast to inline, elements with the block display value are stacked vertically, taking up the entire width of their parent container. Elements like div, p, section, and ul are already set as block by default. With display: block, you can specify the width, height, margin, and padding properties, among others, for more precise control over the rendering of the element.

None (none)

Using display: none hides the element from view, although it remains present in the HTML. The element becomes invisible in the browser.

By understanding and utilizing the various options provided by the display property, you can significantly alter the behavior of the elements and their children in your web pages.