Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. There are only a handful of values that are commonly used:
|Display Type||Display Behavior|
|display: inline||Default of all elements, unless UA stylesheet overrides it|
|display: inline-block||Characteristics of block, but sits on a line|
|display: block||UA stylesheet makes things like
|display: run-in||Not particularly well supported or common|
The default value for all elements is
inline. Most “User Agent stylesheets” (the default styles the browser applies to all sites) reset many elements to
block. Let’s first go through the important ones and then we will cover some of the other less common values.
inline is the default value for elements. Think of elements such as
<b> and how wrapping text in those elements within a string of text doesn’t break the flow of the text. Here is an example:
<em> element has a 1px red border. Notice how it sits inline with the rest of the text?
inline element will accept Margin and Padding, but the element still sits inline as you might expect. Margin and Padding will only push other elements horizontally away, not vertically. This is an example of what an
inline element looks like after Margin and Padding are applied to it:
Also note that an
inline element will not accept Height and Width properties. If present, the browser will simply ignore them.
An element set to
inline-block is very similar to
inline in that it will set
inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a
height which will be respected in this case. Here is an example of what an
height looks like:
A number of elements are set to
block by the browser’s UA stylesheet. They are usually container elements, such as
<ul>. This also includes text blocks such as
block level elements do not sit
inline but break past them. By default (without setting a
width), they take up as much horizontal space as they can. Here is an example:
The two elements with the red borders are
<p>s which are block level elements. The
<em> element in between them doesn’t sit inline because the blocks break down below
In recent years, there have been additional display properties introduced to CSS that are used for new fangled layout methods. One such method is the
flexbox. Here is the CSS syntax for calling the
There are some older versions of flexbox syntax, please check out this article for the syntax when using
flexbox with the best browser support. Be sure to also take a look at this article for a complete guide to using
The flow-root display value creates a new “block formatting context”, or BFC, but is otherwise like
block. A new BFC helps with objectives such as clearing floats, removing the need for hacks to do that. Here is the CSS syntax:
Another one of the new fangled layout methods is the
grid layout. Similar to
flexbox, it is also initially set by the display property:
Here’s a complete guide on the
grid layout, which includes a browser support chart.
display: none totally removes the element from the page. Note that while the element is still in the DOM, it is removed visually and in any other conceivable way (you can’t tab to it or its children, it is also ignored by screen readers, etc).
There is a whole set of display values that force non-table elements to behave like table-elements, if you need that to happen. while it’s rare that they are used in practice, they allow you to be “more semantic” with your code while utilizing the unique positioning powers of tables. Here is a list of all the possible Table Values:
The most commonly used table structure values are:
<div style="display: table;"></div>
<div style="display: table-row;"></div>
<div style="display: table-cell;"></div>
Although these are not commonly used, it is nonetheless good to be aware of their use cases by checking out the examples in this article.
In this video, we break down all the different display property values you need to know and show you exactly how they work.
Source: Web Dev Simplified