Question: In [this JSFiddle](http://jsfiddle.net/colmtuite/7602tm0b/), 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;
}

```

Answer: 
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.

```css
.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;
}
```

```html
<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>
```
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;
}

```