Removing body margin in CSS
Some HTML elements have predefined margins (namely: body
, h1
to h6
, p
, fieldset
, form
, ul
, ol
, dl
, dir
, menu
, blockquote
and dd
).
In your case it's the h1
causing your problem. It has { margin: .67em }
by default. If you set it to 0 it will remove the space.
To solve problems like these generally, I recommend using your browser's dev tools. For most browsers: right-click on the element you want to know more about and select "Inspect Element". In the "Styles" tab, at the very bottom, you have a CSS box-model. This is a great tool for visualising borders, padding and margins and what elements are the root of your styling headaches.
I would say that using:
* {
margin: 0;
padding: 0;
}
is a bad way of solving this.
The reason for the h1 margin popping out of the parent is that the parent does not have a padding.
If you add a padding to the parent element of the h1, the margin will be inside the parent.
Resetting all paddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.