Posted on • Updated on
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.
For further actions, you may consider blocking this person and/or reporting abuse
Vishnu Chilamakuru -
SiΓ΄n Grabham-Madden -
Mysterio -
CodeWizard9 -
Once suspended, melnik909 will not be able to comment or publish posts until their suspension is removed.
Once unsuspended, melnik909 will be able to comment and publish posts again.
Once unpublished, all posts by melnik909 will become hidden and only accessible to themselves.
If melnik909 is not suspended, they can still re-publish their posts from their dashboard.
Once unpublished, this post will become invisible to the public and only accessible to Stas Melnikov.
They can still re-publish the post if they are not suspended.
Thanks for keeping DEV Community π©βπ»π¨βπ» safe. Here is what you can do to flag melnik909:
Unflagging melnik909 will restore default visibility to their posts.
Top comments (12)
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?
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...
An amazing link, would never have found it otherwise.
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
So, would you recommend to make a habit of placing some margin/padding in the parent to prevent overflow etc?
Please, a demo for demonstration what you want to make and email on melnik909@ya.ru. I'll check it
What about list-item, table, inline-table, all the inner table display values, flow-root, contents, none, and out-of-flow block-level elements?
That will be in the future. I described values that are often used
Awesome
thank you. This information is so valuable
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.
Many thanks, i started learning programming 2 months ago and iβm really excited. This information is really useful, thanks