The Display Property

Block

Block behavior makes elements stack one-below-another. Think of it like upside-down gravity: the elements fall to the top of the page and land below the one that came before. They also stretch horizontally to fill all the space available in the container.

Note that in this example, space has been added between the divs to make them easier to see.

Headings, paragraphs, divs, and many more elements behave as block by default.

Note that even though none of the elements in the above example contain enough text to fill all the horizontal space available, each is surrounded by an invisible box that extends all the way to the right edge of the container. We can make that box visible by adding a background color.

Note that in this example the space between the elements results from the browser's default margin for those elements.

Inline

Inline behavior causes elements to be positioned in a horizontal line from left to right, just like words in a paragraph. And just like text, they wrap to a new line when they run out of room.

Inline elements also behave like words when placed within a string of text, such as the strong element in the following example:

Inline-Block

We run into issues when we try to apply vertical (top & bottom) padding, margin, or border to inline elements. In order to preserve the position of the text on a line, those properties don't affect the element's position:

We could use display: block;, but that would cause the element to stretch horizontally all the way across the container:

So instead we can use the hybrid display: inline-block;, which keeps the limited width and sits in a horizontal line like text, but respects vertical padding, margin, and border:

The above example is unlikely to be a common scenario for use of inline-block, but it can come in handy for all sorts of reasons, such as when styling links to look like buttons:

In the example above, what happens if you change the display value to inline? What if you change it to block? This is a good demonstration of the differences between them.

None

Occasionally, we want to visually remove an element from the page entirely, including any effect it might have on the rest of the page's layout. Examples might include a modal dialog that is hidden until a user takes an action to show it, or the contents of a collapsed accordion element, on the contents of a dropdown menu when not in use. For this, we can use display: none;, which causes the element to behave as though it doesn't exist at all.

In the example above, try changing the value of the display property to block. Notice how the hidden element appears. Change it back to none and notice how it disappears again and the layout closes the gap where it was.

Other Display Values

There are a number of other possible values for the display property, including display: flex; and display: grid;, but those serve an entirely different purpose and are covered in the chapters about Flexbox and CSS Grid respectively.

Video Lesson

The following video demo is fully interactive. You can pause it at any time to directly edit the code, and resume playback to pickup where you left off.

Practice Exercise