If you examine the source, you'll see there is no obvious reason why this text you're reading has a gap between it and the blue-background div tag. The div tag as no top margin. Also notice that the first paragraph's top margin (which it gets from the browser by default) is not creating a space between it and the containing div tag like you might expect. This is because the first paragraph's top margin is collapsing with it's parent and effectivly "contributing" the top margin as if the div tag had top margin. Now, hover over the blue div to see what happens when we add just 1px of padding:
One way to take away this form of collapsing margins is to add padding of any positive value to the container. You can see this take effect when you hover over the div tag.
body { padding: 1em; }
div { background-color: blue; }
div:hover { padding: 1px 0; }
p { background-color: orange; }
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.