Geek Answers Handbook

Why doesn't Chrome respect margin?

I am looking for a long one and I can not find the answer: /

In Chrome (Internet Explorer, Konqueror, and many others), the h1 marker at the bottom is added to .blue . However, Firefox follows CSS rules correctly.

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

Based on Gecko: [That's right, I think]

enter image description here

Webkit-based shell based on KHTML and Trident:

enter image description here

CODEPEN

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

+6
source share
3 answers

PERMISSIONS

After a long search, I reported an error on the chrome repo. And they take it as a mistake . So, if someone wants to know that the ending of this story can follow the correction process here . Thanks to everyone who is trying to help us, but let me add that I did not believe that Stackoverflow might not see an error of this magnitude. I am a little less stackoverflowita.

0
source

Margin output associated with the min-height rule in div .blue . Replace it for the height rule if you can get the same result in Chrome and Firefox.

I have no idea why this happens when using min-height . Perhaps this is some kind of Chrome bug.

+2
source

Define your fonts, this is a problem, each browser has different settings for the default fonts, headers (h1 ... h6), respectively. Thus, the actual text height in h1 will be different, and this is the reason for the different fields below / above.

As you can see, the Gecko-based browser uses a kind of Garamond styled font, everyone else uses the default Times New Roman , of course, if the user has predefined fonts for pages, sometimes everything can look the same in all browsers, for example:

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

More articles:


All Articles