I’m only starting my first website. I’m really new to the <div> tag.
I’ve been trying it out on my project but there’s so much space in between my <div>s. I’ve tried things on the internet, but none of them have worked.
So far, I changed the CSS so the margin is -70 which worked, but made my header disappear at the very top of my webpage. I had to remove it.
“Margin collapsing” causes margins from elements like the h1 to show up between the divs. 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 
Woah, this totally helped. Thanks, it solved my problem!
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.