Margin not transparent
I have a
header. Inside I have another
<div> with a repeating background image. I want 60px of margin on the top and bottom to reveal a solid background color set in
<header>, however, it’s not showing the background color
#2f2f2f it’s white. What am I missing?
You are observing collapsing margins:
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
One solution would be to set an
overflow other than
visible on the parent element. In this case:
Take a look at this older answer of mine for a longer explanation with more workarounds.