1. css
  2. /properties
  3. /display

display

Definition

The display property in CSS is used to specify the type of layout a specific HTML element should have. It controls the display behavior of an element, which includes whether it is inline or block-level, whether it should be displayed as a table, flex container, grid container, or none at all, etc.

Examples

In this example, the display property is set to inline for the span element. The inline value makes the span element an inline-level box, which means that it only takes up as much width as necessary to display its content. The rest of the text in the paragraph will wrap around it:

<p>This is a <span style="display:inline;">inline</span> element.</p>

In this example, the display property is set to block for the div element. The block value makes the div element a block-level box, which means that it takes up the full width of its parent container and creates a new line after it:

<div style="display:block;">This is a block element.</div>

In this example, the display property is set to table for the table element. The table value makes the table element behave like an HTML table, with rows and columns. The tr and td elements are treated as table rows and cells, respectively:

<table style="display:table;">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Values

ValueDescription
inlineAn inline-level box is placed inline with the text, only taking up as much width as necessary to display its content.
blockA block-level box takes up the full width of its parent container and creates a new line after it.
inline-blockAn inline-block element is placed inline with the text, but it behaves like a block-level box in that it takes up the full height and width of its content.
tableA table-level box is used to display a table, with rows and columns.
flexA flex container establishes a flexible layout for its children.
gridA grid container establishes a grid layout for its children.
noneThe element will not be displayed and will take up no space.
inheritThe display property will be inherited from the parent element.

Best Practices

  • Use the display property carefully and intentionally, as it affects the layout and behavior of other elements on the page.
  • Try to use semantic HTML elements whenever possible and let the default display values handle the layout, rather than using the display property to change the default behavior of an element.
  • Use the display property in conjunction with other layout-related properties, such as float, position, and flexbox, to create complex and responsive layouts.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes