为什么 Google Chrome 会在我的 H1 标签中添加神秘的边距？答案

【问题标题】：Why is Google Chrome adding mysterious margins to my H1 tag?为什么 Google Chrome 会在我的 H1 标签中添加神秘的边距？
【发布时间】：2015-05-11 08:22:37
【问题描述】：

我有一个具有以下 CSS 样式的 HTML 文档：

h1 {
    font-size: 4.2em;
    text-align: center;
    font-family: "Arial Black", Gadget, sans-serif;
}

在浏览器中检查我的页面时，我看到在没有我输入的情况下添加了这个额外的样式：

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

上面写着browser stylesheet，通常它会包含 css 文件名和行号。

我发现解决方案是将我的 H1 的边距设置为 0。但是为什么首先要添加那些神秘的边距？

【问题讨论】：

您最好指定您使用的浏览器和版本。
嗨，Darren，谢谢，我使用的是 Chrome 版本 40.0.2214.115

标签： html css

【解决方案1】：

这是 webkit 浏览器的默认设置。

-webkit-margin-* 规则被以下内容覆盖：

margin: 0;

别担心他们。

注意：您可能需要使用：

padding: 0;

在某些情况下也是如此。

查看以下类似问题：

-webkit-margin adds unwanted margin on texts

Why is -webkit-margin-before (and after, start, end) not being overridden by my explicit margin and padding rule?

【讨论】：

这一定是我很久以来见过的最快的投票了！
同样...而且我没有抱怨 :) 我的第一个答案之一！
非常感谢，我承认我只是快速搜索了一下是否有人问过问题而没有看到这些。浏览器添加了一些不需要的样式有点烦人，但解决方案很简单。
@sdcr 它们是基本设计的合理默认值。同样对于 Dave，您可以将 * { margin: 0 } 添加到您的 normalize 或 html5bp css 文件（如果您使用其中任何一个）以避免将来发生这种情况。
这是在不包括 IE 或 Firefox (quirksmode.org/blog/archives/2010/12/list_of_webkitb.html) 的 webkit 浏览器上标准化的。