-webkit-margin在文本上添加多余的边距

72

直到现在，这还没有打到我（不仅在webkit浏览器中）。在所有类似p标记，h1标记等的文本中，文本上方和下方都有多余的空间。

在chrome中，我发现了这一点：

用户代理样式表

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

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

css padding

— Tbleckert
source

1

您能否显示示例页面-webkit-margin-after（或您列出的任何其他属性）有所作为？

— 2011年

47

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

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

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

— 雅各布·伊夫林
source

2

为什么要下票？最初的问题是（部分地）暗示着这些字段的默认设置正在引起问题，而我的解决方案已解决了该问题（过去为我解决了类似的问题）。

— JacobEvelyn 2014年

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

— Dan Loewenherz 2014年

5

@JacobEvelyn投了反对票，因为更改margin所有浏览器的作品，而更改-webkit-...仅在webkit上起作用（我没有

— 投票

3

@JacobEvelyn：是否有两个值均为“ 0em”而不是仅为“ 0”的原因？

— 菲尔

1

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

— JacobEvelyn

41

这些-webkit-margin被覆盖margin: 0; padding: 0;。不用担心它们。

多余的空间？也许你已经设置好了line-height:？

— 阿特拉斯
source

3

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

— tbleckert 2011年

你有之间的<p>，<h1>等等？

— atlavis 2011年

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

— tbleckert 2011年

7

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

— ericsoco 2012年

6

这不是一个很好的答案，非零边距/填充会webkit-margin保留-的完整性，这在许多情况下是不希望的

— Forbesmyester 2014年

8

我遇到过同样的问题。在Firefox中正确显示，但在Chrome中无法正确显示。

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

— 埃德温-EEDSGN
source

5

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

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

变成：

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

— 克雷格
source

2

我个人不会这样做。将来，某些开发人员可能会使用HTML美化器/格式设置工具并重新添加空格或手动执行。为何“：empty”有问题，原理是相同的。

— 菲尔，

5

我有同样的问题。菜单链接之间有多余的空间。上述解决方案均无效。对我有用的是负利润。只是做这样的事情：

margin: 0 -2px;

新编辑：

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

删除内联元素之间的所有空格和换行符
跳过元素结束标记-例如</li>（HTML5无关）
负利润率（如上所述-IE6 / 7的问题-谁在乎，升级；）
设置font-size: 0;为有问题的行内元素容器（Android出现问题，如果使用ems调整字体大小）
放弃内联并使用浮点数（通过这种方式，您可以松开text-align：center）

CHRIS COYIER更具体地解释和举例

— 鲁特
source

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

— Cyrill

1

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

我发现我习惯于使用注释掉CSS中的行//。我从来没有注意到它，因为它以前没有引起任何问题。但是，当我//在声明之前在该行中使用时<h3>，它导致浏览器完全跳过了声明。当我进行交易时//，/**/我可以调整保证金。

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

— 故事
source

1

对我来说，图片是：

* {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类型。如果有人能解释一下，为什么浏览器通过应用行高相关的，不可移动的边距来使我们的生活痛苦，我将非常感激。

— d_le_nen
source

0

在Chrome浏览器中，对我来说padding-start是造成这个问题的40px 。我做了以下工作：

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

— 高井
source

0

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

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

— 雌雄同体
source

FYI：只是一个更新 -webkit-margin-before: 0;的IOS 9故障

— РАВИ

0

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

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

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

— 彼得
source

-1

我有同样的问题。我的三个表单元中突然有一个包含数据的表头向下移动了一点。通过添加以下内容即可解决我的问题：

table td
{
    vertical-align: top;
}

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

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

照顾自己！

— 谁知道
source

-1

如果开始user agent stylesheet，那是因为在CSS样式表中没有正确定义tag属性。

在到达页面稍后引用或“需要”的标记属性设置之前，错别字，被遗忘的括号或分号可能会破坏样式表。

通过错误检查（如CSS LINT）运行CSS，并修复最终检测到的所有错误。

— 托尼·吉尔
source