DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Max Lockwood
Max Lockwood

Posted on • Originally published at maxlockwood.dev

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;
Enter fullscreen mode Exit fullscreen mode

Property Values

Value Description
inline Displays an element as an inline element (like ). Any height and width properties will have no effect
block Displays an element as a block element (like

). 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-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>
Enter fullscreen mode Exit fullscreen mode

CSS

span {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

display: inline

An inline element only takes up as much width as necessary, and does not force line breaks.

CSS

p {
  display: inline;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

CSS

span {
  display: inline-block;
  background-color: #ff7f50;
  width: 140px;
  height: 140px;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

CSS

h1 {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

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?

Share this article. Follow me on Twitter for more updates.

Top comments (0)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-