How to color the CSS header?

Question

I’m trying to color one <header></header> with CSS but when I try with the code below there is a header spacing with the top: Code:

header{
  height: 100%;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  background-color: black;
  color: white;
}

<header>
  <h1>Web Calculator</h1>
</header>

Upshot:

Answer 1

*{
  margin: 0px;
}
header{
  height: 100%;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  background-color: black;
  color: white;
}

<header>
  <h1>Web Calculator</h1>
</header>

Try what I did. Some elements see with standard formatting. Like the H1 that has that margin responsible for the spaces that disturb you.

o * is a selector universal. I mean, I’m saying with the:

*{
  margin: 0px;
}

That the margin of all elements should be zero.

If you change the margin of any element this rule will be subcrite and the element you define will have the margin you determine.

Answer 2

When a margin element (in your case, the h1) is inside an element without border or padding, the margin is applied outside the parent element. That’s what’s happening to you.

The h1 has a standard margin up and down, and as it is alone inside the header, its margins, both the top and the bottom, will be applied outside the header (parent element). This is called margin Collapsing.

You can solve this by simply applying a padding: .1px 0 in the header:

body{
   margin: 0;
}
header{
  height: 100%;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  background-color: black;
  color: white;
  padding: .1px 0;
}

<header>
  <h1>Web Calculator</h1>
</header>

CSS will round up the .1px for 0, but will consider the element with padding and avoid the margin of the h1 "jump" out of the header.