Why is Google Chrome adding mysterious margins to my H1 tag?

Question

I have an HTML document with the following CSS style:

h1 {
    font-size: 4.2em;
    text-align: center;
    font-family: "Arial Black", Gadget, sans-serif;
}

When inspecting my page in the browser I am seeing this additional styling being added without my input:

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

It says browser stylesheet where normally it would have the css file name and line number.

I found the solution was to set my H1's margins to 0. But why are those mystery margins being added in the first place?

Answer 1

This is a default on webkit browsers.

The -webkit-margin-* rules are overwritten by:

margin: 0; 

Do not worry about them.

Note: You might need to use:

padding: 0;

in certain cases as well.

See these similar questions:

-webkit-margin adds unwanted margin on texts

Why is -webkit-margin-before (and after, start, end) not being overridden by my explicit margin and padding rule?