Watch out, your CSS margins are collapsing!

headertofooter:

When HTML elements are stacked on top of each other, their margins collapse.

Let’s take a look at an example.

div { background-color: blue; width: 100px; height: 100px; margin: 10px;
}

See the Pen hsmgv by Ian Jennings (@ianjennings) on CodePen.

Thanks to the grid in the…