Why is there a top margin? (Technical Documentation Page)

Hi campers.

I’m having an issue with my page layout for the Technical Documentation Page: https://codepen.io/dylanhamada/full/zbXvEy.

I have a media query for max-width: 450px, that positions my nav element to the top. At larger screen sizes, the nav element is at the left.

However, although I’ve managed to get my nav to the top, there is what seems to be a blank space above the nav. I’ve checked using the dev tools, and it’s not actually a margin for the nav element or any containing element.

Could someone please enlighten me? Any help appreciated.

Welcome to the forums @dylanhamada

It’s a margin that is set by the browser. Different browsers have different margins and a lot of devs start out their CSS by zeroing out the margin and padding so what they style will be consistent across all browsers.

If you do that, it will remove that blank space you’re seeing.

The body has a default margin.
It is very common to set

body {
    margin: 0;
}

at the beginning of the css file.

I had this issue too with my product landing page. I set body margin to 0 and it didnt work. For me it was actually the h2 element beneath the nav bar that was causing the issue. Set margin to 0 and everything was gravy.

I can clearly see that the margin is created by the h1 element under header. Default margin of 0.83em vertically. Thats what is causing the top margin.

nav {
margin: 0;
}

/* Or you can use */

nav {
position: relative;
top: 0;
}

It was already answered, it is the default margin on the h1. You might want to add some top padding after you remove the top margin.

@media (max-width: 450px) {
  h1 {
    padding-left: 0;
    margin-top: 0;
    padding-top: 20px;
  }
}

Yes, many elements have default margins such as the body and all h[1,2,3,4,5,6], and p.

Thanks for all the help, folks.

I zeroed the margin for the h1 element under the small screen size media query, like IAmRC1 suggested, and that fixed the issue.

You gotta use position absolute if you are using top!

1 Like