I can’t remove empty space above my header

Question

margin-top: 0, padding and other things didn’t help to remove empty space above my header.

header {
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: calibri sans-serif;
  font-size: 20px;
  color: white;
  position: relative;
}

html,
body {
  margin: 0;
  padding: 0;
}

.headerlist li {
  list-style: none;
  float: left;
  padding: 15px;
}

.headerlist li>a:link {
  color: white;
  text-decoration: none;
}

<body>
  <header>
    <ul class="headerlist">
      there was some li lines
    </ul>
  </header>
</body>

I expected no empty space above the header but it’s there.

It’s the [`
`’s margin](https://i.stack.imgur.com/clV6M.png). Please use your dev-tools and look at the box model. — Sebastian Simon, Jan 14 '19 at 17:48

score 0 · Accepted Answer · answered Jan 14 '19 at 17:58

Add margin:0 to your ul element (it has default margin values)

header {
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: calibri sans-serif;
  font-size: 20px;
  color: white;
  position: relative;
}

html,
body,
ul {
  margin: 0;
  padding: 0;
}

.headerlist li {
  list-style: none;
  float: left;
  padding: 15px;
}

.headerlist li>a:link {
  color: white;
  text-decoration: none;
}

<body>
  <header>
    <ul class="headerlist">
      there was some li lines
    </ul>
  </header>
</body>

Thanks, it works well now! – Random Guy Jan 14 '19 at 19:42 — Random Guy, Jan 14 '19 at 19:42

score 0 · Answer 2 · answered Jan 14 '19 at 18:11

Need to do below things to fix this,

Need to add clear property to the ul element as we have made li as a floating element.

.headerlist:after, .headerlist:before { content: " "; display: table; clear: both; }
There is a default margin value added for the ul element, need to remove it.
Need not specify height for the header, it will automatically allocate the height based on its child elements.

Please refer the below snippet.

header {
  width: 100%;
  background-color: black;
  font-family: calibri sans-serif;
  font-size: 20px;
  color: white;
  position: relative;
}

html,
body {
  margin: 0;
  padding: 0;
}
.headerlist:after, .headerlist:before {
    content: " ";
    display: table;
    clear: both;
}
.headerlist {
  margin: 0;
 }
.headerlist li {
  list-style: none;
  float: left;
  padding: 15px;
}

.headerlist li>a:link {
  color: white;
  text-decoration: none;
}

<body>
  <header>
    <ul class="headerlist">
      <li>100</li>
      <li>200</li>
      <li>300</li>
      <li>400</li>
    </ul>
  </header>
</body>

Thanks for the answer but it's way more complicated and there are things such as: after (before), content that I wasn't practiced these yet — Random Guy, Jan 14 '19 at 19:50

I can’t remove empty space above my header

2 Answers2