DEV Community

Stas Melnikov
Stas Melnikov

Posted on • Updated on

CSS isn't magic. All nuances about the display property

In my experience, the display property raises a lot of questions for novice developers. Yes, to be honest, I often met confusion from experienced developers too.

I created a live cheat sheet for fixing this situation. Also I talk about most of the nuances of the property in this article.

display: block

The width of block-level elements fills up all available space by the text direction.

The height of block-level elements is calculated automatically depending on the content height.

Block-level elements always start on a new line.

The width and height properties can be applied to block-level elements.

The padding and border properties can be applied too.

When we set margins we get some surprises. The margin before the first block-level element and the margin after the last block-level element end up outside the parent.

If we set the border and padding properties for the parent element margins cease collapsing.

The margins from adjacent block-level elements collapse too. The browsers choose the biggest between the two. And you can't change it.

display: inline

The width and height of inline elements are calculated automatically depending on the content.

If the content of the inline element doesn't fit on one line then a browser will move it on a new line. The width will be calculated depending on the maximum line length.

Inline elements will be on the same line if there is space. If there isn't space, a browser will move an element on a new line.

The width and height properties aren't applied to inline elements.

You can set paddings, borders and margins, but vertical paddings, borders and margins will end up outside the parent.

display: inline-block

The width and height of inline-block elements are calculated automatically depending on the content.

If the content of the inline-block element doesn't fit on one line then a browser will move it on a new line. The width will be equal of the parent width.

Inline-block elements will be on the same line if there is space. Also the whitespace in the HTML code will create some gap between elements.

If there isn't space, a browser will move an element on a new line.

The width and height properties are applied to inline-block elements.

You can set paddings, borders and margins without ending up outside the parent.

display: flex

The width of the flex container fills up all available space by the text direction.

The height of a flex container is calculated automatically depending on the content height.

Flex containers always starts on a new line.

The width and height properties can be applied to a flex container.

The padding and border properties can be applied too.

When we set margins we get some surprises. The margin before the first child element and the margin after the last child element end up outside the parent.

If we set the border and padding properties for the parent element margins cease collapsing.

The margins from adjacent flex containers collapse. The browsers choose the biggest between the two. And you can't change it.

Flex items always are blockified. All flex items that are set the display property with the inline, inline-block, inline-flex, inline-grid, or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

The width of flex items depending on the flex-direction property. If flex-direction: row (default value) the width is calculated automatically depending on the content and the height of flex items is equal to the flex container height.

When flex-direction: column the width of flex items fills up all available space by the text direction and the height is calculated automatically depending on the content.

Flex items position depending on the flex-direction property. When flex-direction: row (default value) flex items will be on the same line. If there isn't space, a browser will squeeze an element depending on its content.

When flex-direction: column flex items will be alignment in a column.

The width and height properties can be applied to flex items.

The padding and border properties can be applied too.

Pay attention margins don't end up outside the parent.

The margins from adjacent flex items don't collapse too.

display: inline-flex

The width and height of inline flex container is calculated automatically depending on the content.

If the content of the inline flex container doesn't fit on one line then a browser will move it on a new line. The width will be equal of the parent width.

Inline flex containers will be on the same line if there is space. Also the whitespace in the HTML code will create some gap between elements.

The width and height properties can be applied to an inline flex container.

You can set paddings, borders and margins without ending up outside the parent.

Flex items always are blockified. All flex items that are set the display property with the inline, inline-block, inline-flex, inline-grid, or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

The width of flex items depending on the flex-direction property. If flex-direction: row (default value) the width is calculated automatically depending on the content and the height of flex items is equal to the flex container height.

When flex-direction: column the width of flex items fills up all available space by the text direction and the height is calculated automatically depending on the content.

Flex items position depending on the flex-direction property. When flex-direction: row (default value) flex items will be on the same line. If there isn't space, a browser will squeeze an element depending on its content.

When flex-direction: column flex items will be alignment in a column.

The width and height properties can be applied to flex items.

The padding and border properties can be applied too.

Pay attention margins don't end up outside the parent.

The margins from adjacent flex items don't collapse too.

display: grid

The width of the grid container fills up all available space by the text direction.

The height of a grid container is calculated automatically depending on the content height.

A grid container always starts on a new line.

The width and height properties can be applied to a grid container.

The padding and border properties can be applied too.

When we set margins we get some surprises. The margin before the first child element and the margin after the last child element end up outside the parent.

If we set the border and padding properties for the parent element margins cease collapsing.

The margins from adjacent grid containers collapse. The browsers choose the biggest between the two. And you can't change it.

Grid items always are blockified. All grid items that are set the display property with the inline, inline-block, inline-flex, inline-grid, or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

The width of grid items fills up all available space by the text direction.

The height of grid items depending on the height of content and the number of items in the grid container.

If the grid container has fixed height grid items' height shares evenly between them taking into account the content height.

If the total height of grid items is more than the grid container the last grid item ends up outside the grid container.

Grid items start on a new line.

The width and height properties can be applied to grid items.

The padding and border properties can be applied too.

Pay attention margins don't end up outside the parent

The margins from adjacent grid items don't collapse too.

display: inline-grid

The width and height of inline grid container is calculated automatically depending on the content.

If the content of the inline grid container doesn't fit on one line then a browser will move it on a new line. The width will be equal of the parent width.

Inline grid containers will be on the same line if there is space. Also the whitespace in the HTML code will create some gap between elements.

The width and height properties can be applied to an inline grid container.

You can set paddings, borders and margins without ending up outside the parent.

Grid items always are blockified. All grid items that are set the display property with the inline, inline-block, inline-flex, inline-grid, or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

The width of grid items fills up all available space by the text direction.

The height of grid items depending on the height of content and the number of items in the inline grid container.

If the inline grid container has fixed height grid items' height shares evenly between them taking into account the content height.


If the total height of grid items is more than the inline grid container the last grid item ends up outside the inline grid container.

Grid items start on a new line.

The width and height properties can be applied to grid items.

The padding and border properties can be applied too.

Pay attention margins don't end up outside the parent

The margins from adjacent grid items don't collapse too.

P.S.
βœ‰οΈ I make unlimited Q&A sessions about HTML/CSS via email with expect responses in 2 days.

😎 I make HTML/CSS reviews of your non-commercial projects and recommendations for improvement.

πŸ§‘β€πŸ«I help in searching high-quality content about HTML/CSS

Please, use my email for communication πŸ‘‰ melnik909@ya.ru

πŸ’ͺ Discover more free things from me

πŸ‘‰ Live cheat sheet about the display property

Discussion (12)

Collapse
avmantzaris profile image
Alex V. Mantzaris

Great article! Can you explain the 'logic' of the browser (rendering engine) for why the parent needs to have a margin or padding in order to prevent overflow of the child components? I would expect that they should be contained in the parent by default. Why would it be allowed to 'step outside' of the parent? Is there a use-case for that?

Collapse
z2lai profile image
z2lai • Edited on

Fortunately, this behaviour, related to collapsing margins, isn't random and it falls under the concept of Block Formatting Context. Always try to find the proper terminology so you can research the concepts better. Here's a good article about BFC: smashingmagazine.com/2017/12/under...

Collapse
avmantzaris profile image
Alex V. Mantzaris

An amazing link, would never have found it otherwise.

Collapse
melnik909 profile image
Stas Melnikov Author

I'm not sure but I remember that was done because people used HTML and CSS for text. So these styles were created for correct displaying of text

Collapse
avmantzaris profile image
Alex V. Mantzaris

So, would you recommend to make a habit of placing some margin/padding in the parent to prevent overflow etc?

Thread Thread
melnik909 profile image
Stas Melnikov Author

Please, a demo for demonstration what you want to make and email on melnik909@ya.ru. I'll check it

Collapse
alohci profile image
Nicholas Stimpson • Edited on

What about list-item, table, inline-table, all the inner table display values, flow-root, contents, none, and out-of-flow block-level elements?

Collapse
melnik909 profile image
Stas Melnikov Author

That will be in the future. I described values that are often used

Collapse
bhupendersinghbisht profile image
Bhupender singh

Awesome

Collapse
joset98 profile image
joset98

thank you. This information is so valuable

Collapse
brvhprince profile image
Prince Takyi Akomea

This is great, because I'm about starting to write code for a UI design and had no idea what I'll be facing with displays.

Collapse
kurdoharki1 profile image
Kurdo Harki

Many thanks, i started learning programming 2 months ago and i’m really excited. This information is really useful, thanks