CSS: Remove body margins

Question

I'm new to web development and I'm having trouble removing body text margins.

There is space between the very top of the browser and the "logo" text. My code is on jsbin.

If I want to remove spaces, body { margin: 0;} Is it wrong?

Answer 1

Certain HTML elements have predefined margins (ie: body, h1 to h6, p, >fieldset、form、ul、ol、dl、dir >、menu, blockquote and dd).

In your case, it is h1 that is causing your problem. By default it has { margin: .67em } . If you set it to 0, it will remove spaces.

To solve such problems, I recommend using the browser's development tools. For most browsers: Right-click the element you want to learn more about and select "Inspect Element." At the very bottom of the Styles tab, you have a CSS box model. This is a great tool for visualizing borders, padding, and margins and which elements are the source of your styling issues.

Answer 2

I would say that using a global reset is a terrible way to solve this problem.

* {
  margin: 0;
  padding: 0;
}

The reason why h1 margins pop up from the parent is that the parent has no padding.

If you add padding to h1's parent element, the margin will be inside the parent element.

Resetting all padding and margins to 0 can cause a lot of side effects. Then it's better to remove the margins for that particular title.