Why does border affect div boundary?

Question

In this JSFiddle, the text sits snuggly against the top and bottom of the pink parent div. However, when you remove the pink border from the pink parent div, there is space between the text and the parent div.

Why does this happen?

Here is my CSS:

.bodyCopy {
  background: pink;
  border: 1px solid pink;
}

p {
  line-height: 28px;
  margin-bottom: 20px;
}

.bodyCopy > p:first-child {
  margin-top: -9px;
}

.bodyCopy > p:last-child {
  margin-bottom: -9px;
}

why is there a lot of CSS reset at the bottom of the fiddle!? that's why the code you show here is not the same like in the fiddle — caramba, Dec 12 '14 at 21:32
To make the demo look presentable. Remove the reset and you'll see it's clearly not causing the issue. — colmtuite, Dec 12 '14 at 21:34

score 2 · Accepted Answer · answered Dec 12 '14 at 21:45

I think it has to do with margin collapsing. Without the border the margin can collapse with the whitespace around it. This makes it seem as if the margin doesn't have any effect, as you want it to refer to the .bodyCopy. Adding the border: 1px solid pink makes it impossible for the margin to collapse. For positive margins this is more clear, collapsing for negative margins feels a bit strange in my opinion.

Frankly I don't know much about margin collapsing, but https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing should give you more background information.

I've tried to make it more clear with a small example.

.container {
  padding: 10px;
}

.box {
  background-color: #f99;
}

.border {
  border: 1px solid #c66;
}

.positive-margin {
  margin: 10px 0;
}

.negative-margin {
  margin: -10px 0;
}

p {
  margin: 0;
}

<div class="container">
  <div class="box">
    <p>box</p>
  </div>
</div>

<div class="container">
  <div class="box">
    <p class="positive-margin">box positive-margin</p>
  </div>
</div>

<div class="container">
  <div class="box">
    <p class="negative-margin">box positive-margin</p>
  </div>
</div>

<div class="container">
  <div class="box border">
    <p class="positive-margin">box positive-margin border</p>
  </div>
</div>

<div class="container">
  <div class="box border">
    <p class="negative-margin">box negative-margin border</p>
  </div>
</div>

Interesting! Can you think of another way around it, that doesn't involve adding a border? I can make the border transparent but it's still a hacky solution. — colmtuite, Dec 12 '14 at 21:52
http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing has some solutions. Adding overflow: auto; to the .bodyCopy might be an easy one — ckuijjer, Dec 12 '14 at 22:12

score 0 · Answer 2 · answered Dec 12 '14 at 21:39

That's because it is changing the size of the exterior of the div, the border increases the elements outside.

If you add a padding that is bigger than the border, then you could check whats happening, check this fiddle: http://jsfiddle.net/es91825w/

.bodyCopy {
    background: pink;
    border: 1px solid pink;
    padding: 3px;
}

score 0 · Answer 3 · answered Dec 12 '14 at 21:43

The border stops the -9px top margin of the first <p> element from collapsing with the top margin of the bocyCopy div, so it applies to the p element making its contents fit snugly.

Without the border, there's nothing to stop the top margin of the first <p> element from collapsing into the top margin of the bocyCopy div, leaving the top margin of the <p> element to default to 0px.

score 0 · Answer 4 · answered Dec 12 '14 at 21:51

The border is preventing the vertical margins of your paragraphs from collapsing, and since you are collapsing negative margins, they will expand. Collapsing in this sense means to just get rid of. Here's an explanation of collapsing margins.

http://www.sitepoint.com/web-foundations/collapsing-margins/

In a nutshell, you can give your .bodyCopy div a padding of 1px (and adjust your paragraph margins by 1px to compensate) to prevent this from happening.

Why does border affect div boundary?

4 Answers4