DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Stas Melnikov
Stas Melnikov

Posted on • Updated on

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.




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.

Top comments (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

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

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

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

Layoffs: It’s Okay to Not Be Okay