Em字体大小是在我的h1顶部添加边距？

Question

I started using a CSS reset (YUI) for the first time with my personal site at http://www.tommaxwell.me , and it has helped a lot with cross-browser compatibility. However, in webkit browsers (Chrome, Safari), the ems font size seems to be adding margin to the top of the h1. When I remove the em, it falls back the default size and doesn't have the margin on the top. In Opera and Firefox that margin isn't there. What should I do?

Answer 1

kindly try to use px instead or try this

.webkit h1{margin:0px}

thanks hope it would help ..

Answer 2

If you Inspect h1 Element then you will see that all margins are 0 for h1 tag.

But height varies for h1 tag in all browsers and this is due to their rendering engine. And that variation maybe creating illusion for you about margin

Answer 3

I'm not sure what you mean as they look same to me across most browsers, but I can't see you setting a line-height anywhere, as a suggestion it may be worth fiddling with the line-height to see if the space is coming from there?

h1 {
    line-height: 1.0em;
}