How to Remove Space (Margin) Above HTML Header

How can I remove space (margin) above HTML header?

Try:

h1 {
    margin-top: 0;
}

You're seeing the effects of margin collapsing.

How to remove empty space above header?

The h1 tag you have in your header has a default .67em margin. You need to set your h1 tag to margin-top: 0px; in order to get rid of the extra white space.

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

header {
    background:lightgray;
    margin:0;
    padding:0;
    height:100px;
    position:relative;
}

h1{
    margin-top: 0px;
}

That should do the trick.

How to get rid of white space between the header, top of the viewport and the first image?

by-default ul tag have margin up and bottom so use this css to reset style.

ul.navigatie {
    margin: 0;
}

How to remove white space from header elements?

Text is rendered in a box (content area) with a leading that causes the gap. The gap is natural and gives the text breathing room.

For alignment to the edges like your case, you can remove the gap by negative vertical margin or padding to "squeeze" the container:

   padding-top: -10px;      /* adjust the value to fit your layout */
   padding-bottom: -10px;

And/or apply negative margin to the contained text (margin-top for h1 and margin-bottom for h3).

An alternative approach you can try is decrease line-height of the text (effectively removing the leading)

h1 {
   line-height: 1;   /* or even 0.8 for tighter distance */
}

But this only makes sense for one-line text only (like your h1) because text lines will all be squeezed together, probably not what you want.

I still have white space above the header even though I removed the margin and padding

You need to remove every element's margins/padding at the beginning, not just the body

* {    margin: 0;    padding: 0;}
header {    background-color: #FFFFFF;}
html, body {    background-color: #7fffd4;}

<header><div class = "name"><h1>WHITE SPACE ABOVE THIS TAG</h1></div></header>

Remove space between header and the page

The <body> element has a default margin. Remove it:

body {  background-color: red;}#example {  height: 75px;  background-color: #484848;}body {  margin-top: 0;}

<header id="example">  example</header>

I can’t remove empty space above my header

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>

Remove the top margin of header in bootstrap

give your h1 and page header a margin-top of 0 and make sure your body doesn't have any padding:

body { padding: 0; }
.page-header,
.page-header h1 {margin-top:0;}

Example bootply

If you need your h1 to move down a bit, then give it padding-top