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 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:
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.
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.
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.