I’ve been reading about Margin Collapse and created a small code snippet to better understand. From what I understand, child elements that touch their parent margin, collapse. The parent takes on the child’s margin if it is larger than the parent margin.
The inner-sqB has a margin-bottom(20px) that is larger than its containing parent bottom margin(10px). However it does not seem to collapse and give this 20px margin to the parent bottom. Why is this? Any help on this would be appreciated.
Please see my actual code in this code pen: My Code
You’ve written paragraphs, haven’t you? So you know that by default, paragraphs have equal margins top and bottom.
Copy the following code into an html file and open it in your favorite browser.
You should see 4 paragraphs with normal margins between them.
Next, remove the left-most comment mark from the “outline” and notice that there doesn’t seem to be any margins above or below each pair of paragraphs.
Next, remove the left-most comment mark from the “background-color” and see that the blue background-color behind the paragraphs but notice the space between the paragraphs pairs (in the divs).
Next, remove the left-most comment mark from the “overflow” line and watch the “missing” margins suddenly become visible. In fact, the margins that were collapsing between the divs no longer collapse.
You can restore the comment mark to the “overflow” property and remove it from the “border” property and then the “padding” property (one at a time) and see that they too will stop the margins from escaping/collapsing. Collapsing is the correct term.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>margin collapse</title>
<style type="text/css">
body {
padding:0;
margin:0;
}
.outer {
/* outline:1px solid magenta; /* my favorite testing tool. */
width:600px;
/* background-color:#bdf; /* my second favorite testing tool. */
margin:0 auto;
/* overflow:hidden; /* "contains" margins */
/* border:1px solid red; /* "contains" margins */
/* padding:1px; /* "contains" margins */
}
</style>
</head>
<body>
<div class="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus.</p>
</div>
<div class="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus.</p>
</div>
</body>
</html>
Hope this helps
Edit:
A follow-up note.
Collapsing margins often cause a mysterious problem at the top of a page where one puts an <h1> as the first item inside of the <header> or some such container… fully expecting the background color applied to that outer container to flow to the top of the page… but it doesn’t. Turns out it’s the collapsing margin on the <h1> being applied to the <header> and resulting in white space above the <header>. The solution is to use one of the three methods shown in my example to contain the “escapee”.
The last inner div did not collapse. RyanReese mentioned that this was due to height being set on the div. Removing height did indeed allow the last inner div to collapse but then the other divs disappeared. My question is
1)Why did the first div collapse with height still applied?
2)Are divs the wrong element to use to experiment with margin collapse?
divs don’t collapse. If they have no content and no height is otherwise applied, then they simply have no height.
You say that you are talking about margin collapse, but you are asking about div collapse. You are confusing the inside of a container with the outside.
Your questions make little sense.
Did you look at the example demo that I posted and try to understand it? It focussed on margins… margin-collapse.
Please excuse my poor terminology i meant the margin collapse. I do understand the concept i just wanted to check it out for myself. And see how child element margins can be propagated to parent elements. I wanted to see how the parent would then use its child’s margin with its siblings(adjacent margin rules). Anyway i have managed to make my code work- My main issue was my divs were empty. In this code i’ve used
Well done, I think. Margin-collapse can be a difficult concept to wrap one’s head around at first. Your example seems cluttered to me, but if it answers your questions, then it serves its purpose very well.
Except for the vertical space between paragraphs, we usually work to eliminate collapsing margins and thereby avoiding unexpected spacing and other surprises in our code… which is why I included methods of containing the margins in my example.
.