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.
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>
|An inline-level box is placed inline with the text, only taking up as much width as necessary to display its content.|
|A block-level box takes up the full width of its parent container and creates a new line after it.|
|An 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.|
|A table-level box is used to display a table, with rows and columns.|
|A flex container establishes a flexible layout for its children.|
|A grid container establishes a grid layout for its children.|
|The element will not be displayed and will take up no space.|
|The display property will be inherited from the parent element.|
- Use the
displayproperty 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.
|Chrome||Firefox||Safari||Internet Explorer||Microsoft Edge||Opera|