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

【问题标题】：Em font size is adding margin to the top of my h1?Em 字体大小在我的 h1 顶部添加边距？
【发布时间】：2012-11-21 06:53:47
【问题描述】：

我第一次在我的个人网站http://www.tommaxwell.me 上开始使用 CSS 重置 (YUI)，它对跨浏览器兼容性有很大帮助。但是，在 webkit 浏览器（Chrome、Safari）中，ems 字体大小似乎会在 h1 的顶部添加边距。当我删除 em 时，它会退回到默认大小并且顶部没有边距。在 Opera 和 Firefox 中，边距不存在。我该怎么办？

【问题讨论】：

在 chrome 和 firefox 中都很好。
如果您尝试像 normalize 或 html5 样板重置这样的良好 css 重置，您将不会遇到此问题。您还可以使用 Safari（或 chrome）中的开发人员工具检查 h1 并查看 margin-top 的来源。
你指的是哪个边距？我看不出 Firefox 和 Chrome 渲染之间有什么实质性区别。
@VladNicula - 我去看看。谢谢！

标签： css yui reset ems

【解决方案1】：

请尝试改用 px 或试试这个

.webkit h1{margin:0px}

谢谢希望对你有帮助 ..

【讨论】：

你试过了吗？是否有理由怀疑0px 与0 的效果不同？根据规范，它们是等效的。

【解决方案2】：

如果你检查 h1 元素，你会看到 h1 标签的所有边距都是 0。

但在所有浏览器中，h1 标签的高度各不相同，这是由于它们的渲染引擎。而这种变化可能会让你对边距产生错觉

【讨论】：

很公平，但差异非常明显。必须有办法解决它。

【解决方案3】：

我不确定你的意思是什么，因为它们在大多数浏览器中对我来说看起来都一样，但我看不到你在任何地方设置 line-height，作为建议可能值得摆弄 line-height 来查看如果空间来自那里？

h1 {
    line-height: 1.0em;
}

【讨论】：

是的，我怀疑 line-height 也是罪魁祸首。但是使用 line-height 您可以删除测量单位，它可以完全没有单位，如 line-height: 1;
我会试试的。在 Safari 和 Mac 版 Chrome 上，我看到 h1 上方有额外的空间，我已经在两台 Mac 上测试过。