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

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