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>
```
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.