What display: block does?

In my experience, a lot of problems with CSS happen because developers have problems understanding the display property. So I created a live cheat sheet. In this article I’ll talk about display: block.

But before embarking on reading I leave the link on my Substack newsletter about CSS. You know what to make 😎

Let’s go!

Default behavior

1. The width property of elements with display: block fills up all available space by the text direction. The height property of elements with display: block is calculated automatically depending on the content.

If the content of elements with display: block doesn’t fit on one line then browsers will move it to a new line.

2. The elements with dispay: block always start on a new line.

Box model features

3. The width and height properties can be set to elements with dispay: block.

4. The padding and border properties can be applied too.

But surprises wait for us when using margins because they might end up outside the parent.

And if we set the border or padding property for the parent, margins stop to end up outside it.

That will work in the case when using vertical paddings or borders but doesn’t with horizontal.

When adding padding or borders with only one side margins will stop ending up outside the parent with this side but will still with the opposite.

Margins stop to end up outside the parent after adding the overflow property with a value that’s different from visible.

In the case of the parent with a few items margins before the first and after the last element end up outside the parent.

In this case, adding the border, padding and overflow property for the parent ceases this margin behavior.

The margins of adjacent elements with display: block collapse too. The browsers choose the biggest between the two.

The padding, border and overflow properties can’t change it.

P.S.
💪 Get more free tips about CSS directly to your inbox

❤ Thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis.