I am working on a site and am using an h1 one for the logo. I am using some top margin to align it correctly but it is causing the header div it is contained within to move down entirely. I thought it would just align the h1, but the whole div is moving down from the top of the page instead, and the h1 is staying at the top of the page. Here is the code, everything is contained within a wrap div.
I am using some top margin to align it correctly but it is causing the header div it is contained within to move down entirely.
Yea… super annoying, isn’t it? I don’t actually know what causes that (anyone know?), but it does happen. Have you tried using padding on the H1 instead of margin? you can also try giving the Image padding-top or margin-top.
Here’s the deal: the header is acting as a parent element to the h1 in a way. If you give #header a position of relative then you should be able to play around with where the h1 goes by also giving in a position. Check out Chris’s video on positioning for CSS
First, the header moving down is correct behavior. Its the way margins collapse. The h1 top margin protrudes out from the top of the parent.
Now, there’s a number of ways to get what you want. The position: relative suggestion above will work if you want to get into absolute positioning of the h1, but it’s not needed here. One way is to give the header div either a top padding or top border (of any amount but 1px will work). This gives the h1’s margin something to ‘push’ against. Another way is to set overflow: hidden; on the header div. What this does is change it’s Block Formatting Context and the margins will react in a different manner.