“Margin collapsing” causes margins from elements like the h1
to show up between the div
s. See here Mastering margin collapsing - CSS: Cascading Style Sheets | MDN in the section “No content separating parent and descendants” (here the ‘parent’ is the div
and the ‘descendant’ is the h1
).
The margin on the h1
comes from the browser’s built in styles. Look up the term “CSS reset” to get some sympathy if you find this annoying. But short of that, you could override it with h1 { margin: 0; }
.
The same thing is going on with the gray bit below, with p
elements also having a margin by default.
Try overriding the default styles to get rid of those gaps and see how it looks. Then add back spacing where you want it.
Collapsing margins make some things easy, but they really start to work against you when you’re working with backgrounds 