Display Types

The display property in CSS controls the layout behaviour of an element and can take on a variety of values.

body {
  display: block;
}

Let's explore some of the commonly used ones:

Block Level Elements:

  • block: Displays the element as a block element (e.g. <div> or <p>). It starts on a new line and takes up the full width available.
  • inline: Displays the element as an inline element (e.g. <span> or <a>). It does not start on a new line and only takes up as much width as necessary.
  • inline-block: Displays the element as an inline-level block container. It allows you to set a width and height, but it still flows with inline elements.

Flex and Grid:

  • flex: Applies Flexbox layout to the element, enabling flex item behaviour.
  • inline-flex: Similar to flex, but the element is inline-level.
  • grid: Applies Grid layout to the element.
  • inline-grid: Similar to grid, but the element is inline-level.

Table Elements:

  • table: Displays the element as a table (e.g. <table>).
  • inline-table: Similar to table, but the element is inline-level.
  • table-row: Displays the element as a table row (e.g. <tr>).
  • table-cell: Displays the element as a table cell (e.g. <td> or <th>).

Other Display Values:

  • none: Hides the element; it will not be rendered on the page and will not take up any space.
  • contents: Makes the element's children elements appear as if they were direct children of the element's parent, effectively removing the element itself from the layout.
  • list-item: Displays the element as a list item (e.g. <li>), which can include a marker or bullet.
  • run-in: Behaves like an inline element if it is followed by a block-level element, otherwise behaves like a block-level element.

Global values:

  • inherit: Inherits the display property from its parent element.
  • initial: Sets the display property to its default value.
  • unset: Resets the display property to its natural value, either from inheritance or the initial value.

These values give you control over how elements are displayed and how they interact with each other in a layout.

Page Last Edited: