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

Posted 2023-03-06

【中文标题】-webkit-margin 在文本上添加不需要的边距

【英文标题】：-webkit-margin adds unwanted margin on texts

【发布时间】：2011-08-08 23:33:54

【问题描述】：

直到现在我才意识到这一点（不仅在 webkit 浏览器中）。在p 标签、h1 标签等中的所有文本上……文本上方和下方都有一个额外的空间。

在 chrome 中我发现了这个：

用户代理样式表

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

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

【问题讨论】：

您能否展示一个示例页面，其中-webkit-margin-after（或您列出的任何其他属性）正在发挥作用？

我不敢相信自从 iPhone 面世以来我从未遇到过这种情况。是的，这个属性即使在 ios15 十年后仍然存在。

【参考方案1】：

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

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

【讨论】：

line-height 是默认值，margin 和 padding 是 0。正如我所说，使用重置样式表。还是一样。

你有<p>、<h1>等之间的吗？

没什么。我应该补充一点，填充无处不在，不仅在我的页面上。我知道这一点，我知道这就是它的行为方式。我只是想知道是否有可能摆脱它:)

@bharal 它对我有用——添加 p margin:0; padding:0; 会覆盖 -webkit-margin 值。它们在 Chrome 的 javascript 控制台中仍然可见，但作为被覆盖的值。

不是一个很好的答案，非零边距/填充使 -webkit-margin's 完好无损，这在许多情况下是不需要的

【参考方案2】：

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

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

变成：

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

【讨论】：

我个人不会那样做。未来的一些开发人员可能会使用 html 美化器/格式化工具并重新添加空格或手动添加。 ":empty" 有问题的原理是一样的。

【参考方案3】：

你也可以像这样直接修改这些属性：

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

在 Chrome/Safari 中为我工作。希望对您有所帮助！

【讨论】：

为什么投反对票？最初的问题是（部分）暗示这些字段的默认设置会导致问题，我的解决方案已解决（这在过去为我解决了类似的问题）。

同意。奇怪的是，这被否决了，因为这是唯一似乎正确的答案。

@JacobEvelyn 否决了，因为更改 margin 适用于所有浏览器，而更改 -webkit-... 仅适用于 webkit（我没有投反对票，但这就是我的想法）

@JacobEvelyn：两者的值都是“0em”而不是“0”有什么原因吗？

@Phil 我不记得了。 0 应该可以正常工作！

【参考方案4】：

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

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

这个故事的寓意：始终使用正确的注释语法！

【参考方案5】：

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

table td

    vertical-align: top;

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

我想这只是愚蠢，并不是真正的问题......但是下一个阅读这个主题的人可能会遇到和我一样愚蠢的错误:)

保重！

【参考方案6】：

我遇到了同样的问题。在 Firefox 中正确显示，但在 Chrome 中不正确。

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

【参考方案7】：

我遇到了同样的问题。菜单链接之间的额外空间。上述解决方案均无效。对我有用的是负边距。 只需执行以下操作：

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

【讨论】：

我遇到了同样的问题“删除内联元素之间的所有空格和换行符”对我有用！谢谢！

【参考方案8】：

对我来说，图片是：

* margin:0;padding:0;

Firefox (FF) 和 Google Chrome 无论如何都设置了 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 类型。 如果有人能给出解释，为什么浏览器通过应用与行高相关的、不可移动的边距让我们的生活变得悲惨，我将不胜感激。

【参考方案9】：

对我来说，在 Chrome 中是大约 40px padding-start 导致了这种情况。我做了以下工作：

ul 
    -webkit-padding-start: 0em;

【参考方案10】：

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

当我遇到这个确切的问题时，这为我解决了。

【讨论】：

仅供参考：只是更新 -webkit-margin-before: 0; 在 ios 9 中中断

【参考方案11】：

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

在到达您的页面稍后引用或“需要”的标签属性设置之前，可能是拼写错误、忘记的括号或分号破坏了您的样式表。

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

【参考方案12】：

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

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

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

【参考方案13】：

现代属性

应改为使用以下属性。

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