Auto Collapsing Vertical Margins
CSS recomputes vertical margins of touching block elements for a normal flow layout.
Normal flow layout? The normal flow layout of a web page stacks all the block elements vertically under one another.
The margin of the element with the largest margin value is used and the margin of the element with the smaller margin value is collapsed to zero.
It is possible to set margins to negative values. If one vertically touching element has a negative margin, the margin values are added together. If both vertical margins are negative, the greater negative value is used.
Consider the following HTML to show collapsing margins using the default web browser settings for the margin-top and the margin-bottom properties.
<body> <h1>Collapsing <code>margin</code> Property</h1> <p>Addidisti ad extremum etiam indoctum fuisse. Quod quidem iam fit etiam in Academia. Putabam equidem satis, inquit, me dixisse. Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant.</p> </body>
The h1 element is a touching child of the body element. The p element is a vertcally adjacent element following the h1 element.
Parent child element collapsing margins
The body element's margin-top and margin-bottom property values are 8 pixels set by the web browser stylesheet.
However you can see a gap between the top margin and the top edge of the web browser window.
Fine grid line spacing is 10 pixels and thick grid line spacing is 100 pixels.
The h1 element's margin-top and margin-bottom property values are .67 ems which converts to 21.440 pixels. They were set by using the normalize.css stylesheet although the value is typical of most web browser stylesheets.
The h1 element's margin-top fills the gap to the the top edge of the web browser window. In this case the h1 element's margin-top was used. This was because margin-top is larger than its body parent element.
The result is that the body element's margin-top was collapsed to zero.
Vertcally adjacent element collapsing margins
Next you can look at margin collapsing for vertically adjacent block elements. The p element vertically follows and touches the h1 element.
The p element's margin-top property is 16 pixels. The bottom-top for h1 element is 21.440 pixels. The total of the touching margins is 36.440 pixels.
The arrow shows that the p element's margin-top does not fill the space back to the h1 element. Rather the space between is 21.440 pixels or the value of the h1 element's margin-bottom property.
The p element's margin-top was collapsed to zero.
Note that Chrome tools do not change the collapsed margin values to zero but rather the true computations of the box model margins for the element. You might expect this with other web browser tools.
Are there collapsing margin exceptions?
You betcha! First is that it does not apply to inline elements such as strong, span or abbr.
The other exceptions apply to using CSS properties not covered yet in the course which include position set to absolute, overflow set to anything but the default value of visible, and float.
Help! Keep in mind the web developer tools will help you identify issues with vertical margins that may or may not have collapsed based on your expectations. To do your analysis, check the adjacent element box models and their margin properties.