What is the CSS Display Property?

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:

ValueDescription
inlineDisplays an element as an inline element (like <span>). Any height and width properties will have no effect
blockDisplays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
contentsMakes the container disappear, making the child elements children of the element the next level up in the DOM
flexDisplays an element as a block-level flex container
gridDisplays an element as a block-level grid container
inline-blockDisplays 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-flexDisplays an element as an inline-level flex container
inline-gridDisplays an element as an inline-level grid container
inline-tableThe element is displayed as an inline-level table
list-itemLet the element behave like a <li> element
run-inDisplays an element as either block or inline, depending on context
tableLet the element behave like a <table> element
table-captionLet the element behave like a <caption> element
table-column-groupLet the element behave like a <colgroup> element
table-header-groupLet the element behave like a <thead> element
table-footer-groupLet the element behave like a <tfoot> element
table-row-groupLet the element behave like a <tbody> element
table-cellLet the element behave like a <td> element
table-columnLet the element behave like a <col> element
table-rowLet the element behave like a <tr> element
noneThe element is completely removed
initialSets this property to its default value.
inheritInherits 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.

Pin It on Pinterest