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

RESOLVING

After a long search I reported the issue on chromium repo. And they accept it as a bug. So, if anyone wants to know the final of this history can follow the fix process here. Thanks anyone who try to help us, but let me add that I did not believe that Stackoverflow can be able to not see an error of this magnitude. I am a little less stackoverflowita.

Answer 2

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 3

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;
}