What is the CSS Display Property?
The CSS Display property specifies how the elements (container, paragraph, hyperlink, heading, etc) will be placed on the web page. This property, as the name implies, is used to define how different elements of a web page are shown.
The most important CSS property for controlling layout is the display property. Depending on the kind of element, every HTML element has a default display value. Most elements’ default display values are block or inline.
Syntax
The CSS display property is specified using keyword values.
CSS
display: value;Property Values
Here is a list of the most common CSS display values:
| Value | Description |
|---|---|
| inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM |
| flex | Displays an element as a block-level flex container |
| grid | Displays an element as a block-level grid container |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values |
| inline-flex | Displays an element as an inline-level flex container |
| inline-grid | Displays an element as an inline-level grid container |
| inline-table | The element is displayed as an inline-level table |
| list-item | Let the element behave like a <li> element |
| run-in | Displays an element as either block or inline, depending on context |
| table | Let the element behave like a <table> element |
| table-caption | Let the element behave like a <caption> element |
| table-column-group | Let the element behave like a <colgroup> element |
| table-header-group | Let the element behave like a <thead> element |
| table-footer-group | Let the element behave like a <tfoot> element |
| table-row-group | Let the element behave like a <tbody> element |
| table-cell | Let the element behave like a <td> element |
| table-column | Let the element behave like a <col> element |
| table-row | Let the element behave like a <tr> element |
| none | The element is completely removed |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
display: block
Every web page element is a rectangle box. The rectangle box’s behaviour is determined by the display property. A block element is one that takes up the entire available width, including line breaks before and after.
The following style rules display the inline <span> elements as block-level elements:
HTML
<span>First paragraph.</span>
<span>Second paragraph.</span>
<span>Third paragraph.</span>
<span>Fourth paragraph.</span>
<span>Fifth paragraph.</span>CSS
span {
display: block;
}display: inline
An inline element only takes up as much width as necessary, and does not force line breaks.
CSS
p {
display: inline;
}display: inline-block
Apart from block and inline display, there’s also inline-block.
By presentation, an element with a display of inline-block is inline. However, it has the added benefit of allowing you to apply width and height to it, which you cannot do when the element’s display is set to inline.
HTML
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<span>inline element</span> Veritatis mollitia eligendi
debitis eum porro hic velit iure est molestias suscipit?</p>CSS
span {
display: inline-block;
background-color: #ff7f50;
width: 140px;
height: 140px;
}display: none
display:none hides an element so that it takes up no space. The element will be hidden, and the page will appear as if it did not exist.
HTML
<h1>This text will not display, as we set the value to none.</h1>
<p>Headline of this paragraph is not displayed,
as we set the value to none.</p>CSS
h1 {
display: none;
}There are numerous alternative display options, such as flex, grid, list-item, table, table-cell, table-column, and so on. Simply changing the values will show you the difference.
Conclusion
Understanding the display property will help your page layouts appear better. It also allows you a lot more flexibility over how your items are displayed when working with CSS.
I hope this post has provided you with the background information you require to effectively use the display property.
Further reading
Want to learn more about display? See display – CSS: Cascading Style Sheets | MDN
See also
How do you use Cascading Style Sheets (CSS)?
What are the 4 properties in a CSS Box Model?
What are CSS Rules and Selectors?
If you liked this article, then please share. You can also find me on Twitter for more updates.