Margin collapse issue between div

Question

I'm expecting the vertical gap between bottom border of first div and top border of second div to be 45px in this case but browser collapse bottom and top margin.

Effective gap b/w bottom border of first div and top border of second div in browser display is 25px.

Ideally border should prevent margin collapse. What is the mistake here? I have not applied any positioning or float.

jsfiddle Code

HTML

<body>
<div><p>A</p></div>
<div><p>B</p></div>
</body>

CSS

div{
    width:200px;
    height:200px;
}
div:nth-child(1){
    background-color: #F52C6F; 
    border-bottom: 10px solid black;
    margin-bottom: 20px;
}
div:nth-child(2){
    background-color: #0ECCCC; 
    border-top: 10px solid yellow;
    margin-top: 25px;
}

So, this is just how css works, its kind of a features see http://stackoverflow.com/questions/14891152/css-margin-overlap-instead-of-giving-distance — monkeyhouse, Jun 02 '13 at 08:50
stackoverflow.com/questions/14891152/… – user1778606 question was asked without any border in the example, so obviously margin will collapse. I mean duplicate one "CSS Margins Overlap Problem" — P K, Jun 02 '13 at 09:09

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

Ideally border should prevent margin collapse. What is the mistake here? I have not applied any positioning or float.

Borders do not block margin collapse between siblings — they only block margin collapse between a parent and a child, or wherever the borders would otherwise intersect the margins.

From the spec:

Two margins are adjoining if and only if:

...

no line boxes, no clearance, no padding and no border separate them

...

Since the borders aren't actually separating or intersecting the margins between your two div elements, the margins are considered adjoining, and therefore margin collapse occurs between them as usual. The borders on your div elements would however prevent margins of your divs collapsing with those of their p children.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 02 '13 at 08:56

BoltClock

700,868
160
1,392
1,356

Thanks Bolt, Can you please provide some reference? http://dev.w3.org/csswg/css-box/ says Certain adjoining margins, as defined in this section, combine to form a single margin. Those margins are said to collapse. Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them. – P K Jun 02 '13 at 08:58
I edited to provide a more reliable reference and include further explanation. – BoltClock Jun 02 '13 at 09:01
The spec is talking about separating *margins* of boxes, not the entire boxes. I'm merely simplifying what the spec is saying. If you're confused by the spec, refer to my answer instead. – BoltClock Jun 02 '13 at 09:04
I got your point Bolt. Tried some examples with sibling and parent-child elements. If border separates two different margin then only collapsing happens. Obviously sibling border doesn't separate two margins. Thanks... – P K Jun 02 '13 at 09:49

score 0 · Answer 2 · answered Jun 02 '13 at 08:50

This behaviour is actually documented in the W3C Specification on the box model: Collapsing Margins.

Basically, adjoining vertical margins collapse into one margin, where the larger margin value is used and the lower value is discarded.

Use one higher margin value instead of two lower. :-)

score 0 · Answer 3 · answered Jun 02 '13 at 08:52

Try somthing like this:

Html:

<body>
    <div id="parent">
<div><p>A</p></div>
<div><p>B</p></div>
    </div>
</body>

CSS:

#parent
{
    width:200px;
    height:200px;
}
#parent div:nth-child(1){
    background-color: blue; 
    border-bottom: 10px solid black;
    margin-bottom: 20px;
  }
#parent div:nth-child(2){
    background-color: green; 
    border-top: 10px solid yellow;
  }

And here is a working jsFiddle: http://jsfiddle.net/hEDR3/

Margin collapse issue between div

3 Answers3