DEV Community

Discussion on: If you could start over from scratch, how would CSS work?

hissvard profile image
Manuel Luciani

I'd say the weirdest thing I've run into in that regard is margin collapse - like, why?

Thread Thread
nektro profile image
Meghan (she/her) • Edited on

if you have a ul with some li and then on the li set display: inline then yes, margin will be ignored, but you can fix it by using inline-block. All inline elements ignore vertical margin. But this is more an "issue" with the expected vs actual result of the layout engine and not from CSS

Thread Thread
hissvard profile image
Manuel Luciani

Yeah, although what I was referring to is the way only the bigger margin is considered in some situations - you'd usually expect elements' margins to add up

Thread Thread
nektro profile image
Meghan (she/her)

The selector with the most specificity is the one that gets applied. If you have a element in an element in an element etc and they all have a margin then the margin does add up.

Thread Thread
adrianirwin profile image
Adrian Irwin • Edited on

Margin collapse makes a lot of sense in textual content heavy documents. A typical example might be a li followed by a an h3 element, and generally the header would have an ample top margin, so there is no need to combine the trailing margin of the list with the leading margin of the header, it would simply lead to excessive white-space.

Useful for the kind of documents HTML was developed for, but not so useful once intricate visual designs and layouts enter the scene.

Thread Thread
nateous profile image
Nate

I agree with you, Meghan. Most of the hardship comes from not understanding how to do something in a simple way with CSS. As soon as we got rounded corners designers wanted something else we couldn't do easily. Haha