What display: inline 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: inline.

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 and height properties of elements with display: inline are calculated automatically depending on the content.

If the content of elements with display: inline doesn't fit on one line then browsers will move it to a new line. The width will be calculated depending on the maximum line length.

2. If there is space elements with display: inline will be on the same line. If no, browsers will move the part of them to a new line.

Box model features

3. The width and height properties can't be set to elements with display: inline.

4. You can set paddings, borders and margins. Vertical values will end up outside the parent.

Also, paddings, borders and margins can overlap paddings and borders of the parent.

Paddings, borders and margins overlap each other if elements with display: inline are in multiple rows.

In the case with multiline elements margins can end up outside by horizontal.

The overflow property crops margins if a value is different from the visible value.

There's no point using margin: auto for elements with display: inline because it won't work.

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.