3

I'm trying to understand the effect that margin has on two elements. I have the following HTML, see the dabblet:

<p>some text</p>
<pre>some code</pre>

I have the following CSS:

body { color: white; }
p { background: red; margin-bottom: 50px; padding: 20px; }
pre { background: purple; margin-top: 40px; padding: 20px; }

So I've given the paragraph tag a bottom margin of 50px, and I've given the pre tag a top margin 40px. I was expecting therefore to find 90px vertical distance between them, but only have 50px.

I understand that the margins are collapsing, and that if I want to fix this then I need to add display: inline-block to the pre tag. But that causes the width of the pre tag to collapse.

Again, I know that I can fix the width problem by adding width: 100% to my pre tag, but I've got padding on the pre tag (20px), so this causes my elements to be too wide. I know that I can use box-sizing to deal with that, but what an almightly pain in the crotch it is to have to mess about with width, display and box-sizing just to have the desired amount of vertical space between two elements. So I simply refuse to do any of that.

Instead, I've decided that I'm just going to add margin-top: 90px to my pre tag, which will guarantee that I've got the 90px space that I want.

My question is: Are there any browsers out there that don't collapse margins in the way the others do? Will I inadvertently end up with 140px space (90px from the top-margin of the pre tag + 50px from the bottom margin of the paragraph tag)? In other words, are margins collapsed reliably and consistently across all browsers, or is there a browser out there that does it's own thing?

stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
  • AFAIK, all browsers are consistent in `margin-collapse`. "So I simply refuse to do any of that." seems a little over-exuberant to me but that's a matter of choice....probably not best practice though. – Paulie_D Jan 27 '15 at 16:32
  • 1
    This might help though: [**how-to-disable-margin-collapsing**](http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) – Paulie_D Jan 27 '15 at 16:34
  • 1+ I see your frustration – Oriol Jan 27 '15 at 16:35
  • @Paulie_D - There's an esoteric feature of CSS called ["Clearance"](http://www.w3.org/TR/CSS2/visuren.html#clearance) which affects margin collapse and Chrome gets horribly wrong. But for simple cases like the OP's, I agree, margin collapse is implemented consistently. – Alohci Jan 27 '15 at 19:49
  • @Alohci how is `clear` an esoteric property? Anyone who has worked with CSS more than once or twice has come into contact with `float`, and everyone who has tried to fix the mess that floats make on your page will probably come across `clear` at some point. I'm positive that 99% of the projects I've worked on use the `clear` property more than a couple of times, even if it's just in the form of the `.clearfix` helper class. Also, the only Chrome bug that I can find in relation to this occurred in version 25 (early 2013) and was fixed in v 26, – Stephan Muller Jan 27 '15 at 20:41
  • 1
    @StephanMuller - `clear` is not exactly "Clearance". Clearance only occurs when the clearing of an element causes the element to move vertically down. When this happens it has an effect on margin collapse. To see its effect compare http://jsfiddle.net/07vm3189/ in IE or Firefox with what happens in Chrome. The IE/Firefox behaviour is correct and I discuss it in more detail in my answer to [this question](http://stackoverflow.com/questions/25350805/margin-collapse-and-clearance) – Alohci Jan 27 '15 at 22:32
  • @Alohci I have been educated. Thanks! – Stephan Muller Jan 28 '15 at 10:56

1 Answers1

2

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.

Community
  • 1
  • 1
Stephan Muller
  • 27,018
  • 16
  • 85
  • 126