Starting with CSS is easy but as we start using it extensively on complex websites, the subtle changes to a single property can impact page layout on a greater scale. Well, this isn't new to many developers, infact centering a div still frightens many developers. There isn't a single solution to this problem, but we can still get rid of this by understanding few concepts of CSS in a new way.
If you are starting/learning CSS you must have used margin extensively to produce some decent layouts but as you progress and start scaling up your website, you realize margin's does not behave in a way you expected them to be. This isn't because you are writing it incorrectly, but you left something behind. Let's try to understand what we are missing while dealing with margin's.
The basic purpose of margin is to create space between elements and when you mention 1rem it creates space of 1rem.Easy right! Well this isn't the whole story, other than developer there is someone who is constantly applying margin's to elements. Let's say the body element always have some margin set to it and we have to rewrite that to zero. Okay, then who is applying these styles?...It's the user agent(browser). Browser always carry some default styles with it, if we miss out on applying it, by default it applies those styles to it. We can override this property by giving some margin to element and it should behave as we expected it to. Let's see below example,
In the above code, the top element has margin-bottom:40px and bottom element has margin-top: 40px and the space between two elements should be 80px but this isn't the case here, the total margin is 40px.Why?
While using margins we need to understand margin collapsing for better utilization of margins. Margin collapsing combines the two margins and produce a new value resulting a new margin but it only does for margin-top and margin-bottom. In the above example two elements has margin of 40px which should be 80px when combined but browser combined two values and produced a margin of 40px and it's completely done by user-agent stylesheets.
Another scenario where margin collapsing seems to abrupt design flow is parent and first child scenario.
In the above example parent container has margin-top:20px and the child elements has margin-top:40px but the first child does not have the margin-top instead parent element has margin-top as 40px
This is because parent element margin and first child's margin is collapsing as there is no space between two, resulting in larger margin(first-child's) being cascaded here. The same behavior can be observed with bottom element with margin-bottom as there is no space between two(try this out for better understanding).
Margin collapsing isn't always harmful to your design, in most cases it helps by removing duplicate margin's elements. In the above example we need 40px space between elements but we have given margin-bottom:40px to top-element and margin-top:40px which is not a desired output in many cases.This seems crazy but when working on complex designs we often tend to lose track of margin's as they are not included in fill area.
At the same time this can cause problems to your design by limiting the values resulting in unexpected behaviour.
We can't avoid this behvaiour but understanding it can help in writing conscious CSS.
Conclusion:
- Browser applies default margins to elements.
- It's better to reset body margin to zero to override default margin.
Margin-top & bottom always collapse when there is no space between elements.
First-child's top margin collapses with parent's top margin.