Default margins for h4 element

Web Development Front-End
1

In my css i have set the body element to have margin value set to 0, however when I add a h4 element to the html, it automatically give a margin on 30px. Isn’t margin value set to 0 for body element supposed to set margins for all elements inside the body element to 0?

2

The margin is no inherited value. So, no. It is only for the element you set it to. You can reset the default margin for all elements like so:

* {
  margin: 0;
}
3

So if I set the margin to 0px for the body element, will it only set this for the first nested element inside the body element? In my code the first element nested inside of the body element is the header element and the margin of the header element is automatically adjusted to 0px. Before I set the body elements margin to 0px, the header element had a margin of about 8px.

4

What’s happening is that if you don’t set any CSS resets, all elements will have its properties (margins/paddings/box-sizing/ect) to what your browser defaults to.

When you’re changing the body’s margin, you’re only changing the body’s margin and not every element that’s nested inside. That’s where using the * selector is useful because that’s a way to reset all elements in the html doc to what you like.

In this case, the most common properties to reset are

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

That way, you’re resetting all elements’ properties to what you like instead of what a browser defaults to.

Hope this helps!

5

That’s great, thanks