Why Chrome doesn't respect the margin properly?

Question

I search for a long and I can't find an answer :/

In Chrome (Internet Explorer, Konqueror, and many others) the h1 margin at bottom is added to .blue. However, Firefox respect the css rules properly.

Any suggestion?

HTML

<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>

CSS

.red{
  background: red;
  /* All this contain margins */
  float:left;
  /* padding-top:1px; */
  /* display: inline-block */
  /* overflow: hidden */
}

.blue{
  background: blue;
  min-height: 60px;
}

h1{
  margin: 10px 0 20px;
  background: green;
}

Gecko-based: [This one is the correct, I guess]

Webkit-based, KHTML-based and Trident shell:

CODEPEN

http://codepen.io/marquex/pen/fzsIk

Answer 1

The margin issue you are having is related with the min-height rule in the .blue div. Replace it for a height rule if it is possible to get the same result in Chrome and Firefox.

I have no idea why that is happening when using min-height though. Maybe is some kind of Chrome's bug.

Answer 2

Define your fonts, this is the problem, every browser have different settings for default fonts, headings (h1...h6) respectively. So the actual height of the text in h1 will be different and this is the cause for different margins at bottom/top.

As you can see, Gecko-based browser uses a sort of Garamond-styled font, all other use by default Times New Roman, of course if user was predefined the fonts for pages, sometimes everything may look the same across all browsers, example:

h1{
  margin: 10px 0 20px;
  background: green;
  font-family: "Your-favorite-font", Times, sans-serif;
  font-size: 2em;
}