How to Fix Collapsing Top and Bottom Margins

How to Fix Collapsing Top and Bottom Margins?

This answer is based off of the fiddle you provided.

I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:

article {
  //display: block;
  clear: both;
  padding: 10px;
}

This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.

.rounded-box {
  background-color: #959392;
  border-radius: 15px;
  margin: 10px 0px;
}

Working Example http://jsfiddle.net/LCTeU/4/

So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.

How to disable margin-collapsing?

There are two main types of margin collapse:

• Collapsing margins between adjacent elements
• Collapsing margins between parent and child elements

Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and overflow: hidden will have the same effect. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height.

Other properties that, once applied to the parent, can help fix this behaviour are:

• float: left / right
• position: absolute
• display: inline-block / flex / grid

You can test all of them here: http://jsfiddle.net/XB9wX/1/.

I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.

Sources: Sitepoint's article Collapsing Margins

Collapsed margin in CSS

The margins of #empty collapse through, resulting in a 20px collapsed-through margin. This collapsed-through margin collapses with the 10px bottom margin of the first paragraph, and the 10px top margin of the last paragraph. This results in a 20px gap between the first and last paragraphs, since the collapsed-through margin is larger than either of their margins and therefore swallows them both.

Your observation is correct: #empty, when its collapsed through, is rendered with its top margin. From the spec:

• [...] The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.

Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.

The position that "would have been if the element had a non-zero bottom border" is the position of the element if the element's margins did not collapse through, since having a non-zero bottom border blocks the margins from collapsing through.

Why does Margin Collapsing only apply to top and bottom but not left and right

Only block level elements can have their margin collapsed and if they are block level elements, they cannot have elements to their left or right.

See the following link for more information: Why horizontal margin doesn't collapse as vertical margin?

Hope this helps.

Why do the top and bottom margins disappear in the child container?

In some cases, top and bottom margins are collapsed. You can read more about it here. What's happening is this:

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block, [...] then those margins collapse. The collapsed margin ends up outside the parent.

Margins trouble, top margin goes on top of bottom margin

What you are seeing is called margin collapse. It is the correct behaviour according to the standard.

Margin does not push down another margin

Do vertical margins collapse reliably and consistently across all browsers?

It's hard to give a definitive answer to this question because it's very broad. "All browsers" is a lot of browsers. There could always be some fringe browsers you never heard of that handle this differently. It all depends on how the browser's CSS rendering engine was written.

---

That said, any browser that wants to be taken seriously will try to adhere the W3C specs, which have the following to say about margin collapsing:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse, except:

• Margins of the root element's box do not collapse.
• If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Horizontal margins never collapse.

Source: Box Model (w3.org)

---

I figured it'd be a nice addition to just put your code to the test in as many browsers as possible. I made a test page page of your html (slightly modified), with an absolutely positioned 50px high block that should fit right in between the collapsed margin, to make it easier to spot a difference:

http://files.litso.com/playground/margin.html

Then I ran this through browsershots.org to get screenshots of how browsers would display this piece of HTML:

http://browsershots.org/http://files.litso.com/playground/margin.html#
(I have no idea how long this will stay cached, but I guess you could always just run it again)

Interestingly, the positioning of the blue block is a few pixels off in a bunch of the screenshots. You can still tell the margins are collapsed correctly, but I do wonder what exactly the problem is with the positioning.

The only browsers that don't seem to collapse the margin correctly are Dillo 3.0.2 and Links 2.7 on Debian 6.0, neither of which seem to listen to padding or margin properties at all (nor to the absolute positioning for that matter). They would mess up your layout no matter what, and you shouldn't worry about it. People use browsers like these for a specific reason, and seeing your page exactly as you intended it to be seen is not one of them.

---

TL;DR: Yes, it's safe to say that all browsers collapse these elements reliably and consistently.

Vertical margins do not overlap

That's because margin collapse only happens vertically. By setting display: inline-block, this breaks the rule since the lower element may try to stick with the element above it.

More information can be found at here.

Could you show a specific problem so we can tackle it together?. Since styling display: inline-block; with width: 100% doesn't make any sense

#contentwrap {
    margin-bottom: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}
#pagenavi {
    margin-top: 50px;
    background: blue;
    width: 100%;
    height: 100px;
}

<div id = "contentwrap"></div>
<div id = "pagenavi"></div>

---

Related Topics