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

直到现在我才意识到这一点(而且这不仅仅是在 webkit 浏览器中)。在所有文本，如 p标签，h1标签等。.在文本上下方有一个额外的空格。

在铬合金中我发现了这个:

用户代理样式表

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

这使得有些地方的校准错误。是的，我正在使用一个重置样式表，没有填充或边距添加。基本上就是这样。为什么会这样，我该怎么解决？

93822 次浏览
小开

这些 -webkit-margin(s)被 margin: 0; padding: 0;覆盖。不要担心它们。

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

小开

只需删除标签之间的空格即可。

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

变成:

<p id="one"></p><p id="two"></p>
小开
最佳答案

您还可以像下面这样直接修改这些属性:

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

我在 Chrome/Safari 浏览器中工作。希望这有帮助！

小开

我的 <h3>标签也有同样的问题。我试着设置 margin:0;，但是没有用。

我发现自己习惯性地使用 //来注释 css 中的行。我从来没有注意到，因为它以前没有造成任何问题。但是，当我在声明 <h3>之前的行中使用 //时，它会导致浏览器完全跳过声明。当我把 //换成 /**/时，我能够调整保证金。

这个故事的寓意是: 永远使用正确的注释语法！

小开

我也有同样的问题。突然，我的三个表单元格中有一个包含数据，它的头部向下移动了一点。我的问题只需要加上这个就解决了:

table td
{
vertical-align: top;
}

看起来“高级”样式表中的其他元素在告诉我的数据以单元格为中心，而不是仅仅停留在顶部。

我想这是愚蠢的，并不是一个真正的问题... 但下一个人读这个话题可能有同样愚蠢的错误，因为我做:)

保重！

小开

我也有同样的问题，在 Firefox 中正确显示，但是在 Chrome 中却没有。

我仔细查看了 http://meyerweb.com/eric/tools/css/reset/，发现我没有在样式表中为 body 标记声明一个通用的 line-height。设置为1.2，在两个浏览器中重新创建了正确的布局。

小开

我也有同样的问题。菜单链接之间的额外空间。以上的解决方案都不管用。对我有效的是负利润。 就像这样做:

margin: 0 -2px;

新编辑:

这与 webkit 的利润率没有任何关系。问题很可能发生在内联元素上。之所以会发生这种情况，是因为在内联元素之间存在空格或换行符。要解决这个问题，你有很多选择:

  • 删除内联元素之间的所有空格和换行符
  • 跳过元素结束标记-例如 </li>(HTML5不关心)
  • 负利润(如上所述-IE6/7的问题-谁在乎，升级;)
  • 将 font-size: 0;设置为有问题的内联元素容器(android 有问题，ems 有字体大小问题)
  • 放弃内联，使用 float (这样你就失去了文本对齐: 居中)

由 CHRIS COYIER 更具体地解释和例子

小开

对我来说，情况是这样的:

* {margin:0;padding:0;}

火狐(Firefox)和谷歌浏览器(Google Chrome)的利润率都是0.67 em。 FF 显示了它的默认保证金，但是划掉了，但是还是应用了。 GC 显示了未交叉的默认保证金(- webkit-edge-before...)。

我申请了

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

但是没有用，尽管 GC 现在显示它的默认保证金跨越了。

我发现，我可以申请

line-height: 0;

或者

font-size: 0;

达到预期的效果。 如果假设边距为.67 em 型，那么这就说得通了。 如果有人能解释一下，为什么浏览器使我们的生活如此悲惨，因为它使用了一个线高依赖的、不可移除的边距，我会非常感激。

小开

对我来说，在 Chrome 浏览器中是大约40px 的 padding-start导致了这个问题，我做了以下工作:

ul {
-webkit-padding-start: 0em;
}
小开 
    -webkit-margin-before: 0em;
-webkit-padding-start: 0;
-webkit-margin-after: 0em;

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

小开

如果 user agent stylesheet起作用了，那是因为标记属性没有在 css 样式表中正确定义。

在到达页面后面提到的或“需要”的标记属性设置之前，输入错误、忘记的括号或分号很可能会破坏样式表。

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

小开

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

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

“ *”选择所有 css 元素并覆盖 webkit-marge。

小开

现代房产

应改用下列属性。

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


提交答案