Re:Incomplete List of Mistakes in the Design of CSS
by usaphp on Thursday October 25, 2018 @10:23AM
(#18301107)
> I just want the code to behave as I instructed it. If I say this div should have 20px of margin on top and bottom, then it should
That’s exactly what collapsing margins are doing. It makes your div have 20px margin, not 40px. Imagine two blocks one above another. If margins were not collapsing - your divs would have 40px margin instead of 20 like you set.
> If I wanted a margin of a fixed size that doesn't dynamically change based on content
It does change based on browser width, that’s what most would want. From a designer perspective - the wider the element is - the more margin on top and bottom it should have for better readability. You don’t want your margins to be different for a list of various text items for example, it will look ugly. You want margins to be different based on a screen size.
That’s exactly what collapsing margins are doing. It makes your div have 20px margin, not 40px. Imagine two blocks one above another. If margins were not collapsing - your divs would have 40px margin instead of 20 like you set.
> If I wanted a margin of a fixed size that doesn't dynamically change based on content
It does change based on browser width, that’s what most would want. From a designer perspective - the wider the element is - the more margin on top and bottom it should have for better readability. You don’t want your margins to be different for a list of various text items for example, it will look ugly. You want margins to be different based on a screen size.