Question

直到现在这还没有打到我（这不仅仅是在webkit浏览器中）。在p标签，h1标签等所有文字中，文字上方和下方都有一个额外的空格。

在chrome中我发现了这个：

用户代理样式表

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

这使得某些地方的对齐错误。是的我正在使用重置样式表，并且没有添加填充或边距。几乎是一个基本的设置。为什么这样，我该如何解决？

Answer 1

您也可以直接修改这些属性：

-webkit-margin-before:0em;
-webkit-margin-after:0em;

适用于Chrome / Safari。希望有所帮助！

Answer 2

这些-webkit-margin（s）被margin: 0; padding: 0;覆盖。别担心。

额外的空间？也许你已经设置了line-height:？

Answer 3

我有同样的问题。在Firefox中正确显示但不在Chrome中显示。

我仔细查看了http://meyerweb.com/eric/tools/css/reset/，发现我没有在样式表中声明body标签的一般行高。将其设置为1.2，并在两个浏览器中重新创建正确的布局。

Answer 4

只需删除标记之间的空格，例如

<p id="one"></p>
<p id="two"></p>

变为：

<p id="one"></p><p id="two"></p>

Answer 5

我遇到了同样的问题。菜单链接之间的额外空间。以上解决方案均无效。对我有用的是负利润。做这样的事情：

margin: 0 -2px;

新编辑：

这与-webkit-margins无关。最有可能的问题是内联元素。这是因为您的内联元素之间有空格或换行符。要解决此问题，您有很多选择：

删除内联元素之间的所有空格和换行符
跳过元素结束标记 - 例如</li>（HTML5无关紧要）
负利润率（如上所述 - IE6 / 7的问题 - 谁关心，升级;）
将font-size: 0;设置为有问题的内联元素容器（与android有问题，如果使用ems进行字体大小调整）
放弃内联并使用浮动（这样你松开text-align：center）

Explained more specifically and examples by CHRIS COYIER

Answer 6

我的<h3>标签遇到了同样的问题。我尝试设置margin:0;，但它不起作用。

我发现我习惯性地使用//在我的CSS中评论线条。我从来没有注意到它，因为它之前没有引起任何问题。但是当我在声明//之前在行中使用<h3>时，它导致浏览器完全跳过声明。当我//换/**/时，我能够调整保证金。

这个故事的道德：始终使用正确的评论语法！

Answer 7

对我来说，照片是：

* {margin:0;padding:0;}

Firefox（FF）和谷歌浏览器无论如何都会提供0.67em的利润率。 FF显示其默认保证金，但划掉了，但无论如何应用它。 GC显示其默认保证金（-webkit-margin-before ...）未加盖。

我申请了

* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}

但无济于事，尽管GC现在显示其默认保证金已超过。

我发现，我可以申请

line-height: 0;

或

font-size: 0;

达到预期的效果。如果假设，这是有意义的，边距是.67em类型。如果有人可以给出解释，为什么浏览器通过应用行高依赖，不可移动的边距使我们的生活变得悲惨，我将非常感激。

Answer 8

对于Chrome中的我来说，导致此问题的大约是40px padding-start。我做了以下工作：

ul {
    -webkit-padding-start: 0em;
}

Answer 9

    -webkit-margin-before: 0em;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0em;

当我遇到这个问题时，这解决了我。

Answer 10

在您的css文件中添加以下内容。

* {
  -webkit-margin-before: 0em !important;
  -webkit-margin-after: 0em !important;
}

'*'选择所有css元素并覆盖webkit-margin。

Answer 11

现代属性

应改用以下属性。

margin-block-start: 0;
margin-block-end: 0;

很少需要使用这些内容，但以下内容有助于避免在系列中的最后一段之后出现多余的空间。

p:last-child
{
   margin-block-end: 0;
}

我还发现，即使在 Chrome 中，您也可以通过在某些情况下将边距设置为继承来触发“鬼边距”。

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start

Answer 12

我遇到了同样的问题。突然，我的三个表格单元格中有一个包含数据的标题向下移动了一点。我的问题只是通过添加这个来解决：

table td
{
    vertical-align: top;
}

似乎“更高”样式表中的其他元素告诉我的数据在单元格中居中，而不是仅仅停留在顶部。

我猜它只是愚蠢，并不是真正的问题...但是下一个阅读这个主题的人可能会有与我相同的愚蠢错误：）

小心！

Answer 13

如果int month = calendar.get(Calendar.MONTH); if (month == Calendar.JANUARY) { // We are in January and no warning is displayed! }正在加入，那是因为你的css样式表中没有正确定义tag属性。

在达到您的网页后来引用的标签属性设置或者需要＆＃34;

之前，错误，遗忘的括号或分号可能会破坏您的样式表。

通过错误检查运行您的CSS，例如CSS LINT并修复最终检测到的错误。

-webkit-margin在文本上添加了不必要的边距

13 个答案:

现代属性