-webkit-margin 在文本上添加不需要的边距
直到现在我才意识到这一点（而且这不仅出现在 webkit 浏览器中）。在 p 标签、h1 标签等所有文本上...文本上方和下方都有一个额外的空格。
在 Chrome 中我发现了这个：
用户代理样式表
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
这会导致某些地方的对齐错误。是的，我正在使用重置样式表，并且没有添加填充或边距。几乎是基本设置。这是为什么？我该如何解决？
This hadn't hit me until now (and this is not only in webkit browsers). On all texts in like p tags, h1 tags etc... there's an extra space over and below the text.
In chrome I found this:
user agent stylesheet
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
This makes the alignment wrong in some places. And yes I'm using a reset stylesheet and no padding or margin are added. Pretty much a basic setup. Why is this and how do I solve it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（13）
对我来说，情况是：
Firefox (FF) 和 Google Chrome 无论如何都设置了 0.67em 的边距。
FF 显示了其默认边距，但被划掉，但还是应用了它。
GC 显示其默认边距 (-webkit-margin-before...) 未交叉。
我申请了，
但没有成功，尽管 GC 现在显示其默认保证金已经交叉。
我发现，我可以应用
或
来达到预期的效果。
如果假设边距是 0.67em 类型，那么这是有道理的。
如果有人能解释一下为什么浏览器通过应用行高相关的、不可移动的边距让我们的生活变得痛苦，我将非常感激。
For me, the picture was:
Firefox (FF) and Google Chrome both put 0.67em margins regardless.
FF showed its default margin, but crossed out, but applied it anyway.
GC showed its default margin (-webkit-margin-before...) uncrossed.
I applied
but to no avail, although GC now showed its default margin crossed.
I found out, that I can apply either
or
to achieve the desired effect.
This makes sense, if one assumes, that the margin is of the .67em - type.
If anybody could give an explanation, why browsers make our lives miserable by applying a line-height dependent, non-removable margin, i would be really grateful.
对我来说，在 Chrome 中，是一些 40px
padding-start导致了这个问题。我做了以下有效的操作：For me in Chrome it was some 40px
padding-startthat was causing this. I did the following that worked:当我遇到这个问题时，这为我解决了。
This solved it for me when I was having this exact problem.
在您的 css 文件中添加以下内容。
'*' 选择所有 css 元素并覆盖 webkit-margin。
In your css file add the following.
'*' selects all css elements and overrides the webkit-margin.
现代属性
应改用以下属性。
很少需要使用这些，但以下内容对于避免系列中最后一段之后的额外空间很有用。
我还发现，即使在 Chrome 中，在某些情况下，您也可以通过设置继承的边距来触发“幽灵边距”。
https://developer.mozilla.org/en- US/docs/Web/CSS/margin-block-start
Modern properties
The following properties should be used instead.
It's very rare to need to use these at all, but the following can be useful to avoid extra space after the last paragraph in a series.
I also found that even in Chrome you can trigger the 'ghost margin' by setting margin to inherit in some cases.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
我也有同样的问题。突然，我的三个包含数据的表格单元格中的一个的标题向下移动了一点。我的问题只需添加以下内容即可解决：
似乎“更高”样式表中的其他一些元素告诉我的数据将其自身置于单元格中，而不是仅仅停留在顶部。
我想这只是愚蠢的，并不是真正的问题......但下一个阅读此主题的人可能会犯和我一样的愚蠢错误:)
小心！
I had the same problem. Suddenly one out of my three table cells containing data its header was moved down a little bit. My problem was simply solved by adding this:
Seems like some other element in a 'higher' style sheet was telling my data to center itself in the cell, instead of just staying on top.
I guess its just stupid, and wasnt really a problem... but the next person to read this topic might have the same stupid error as i did :)
Take care!
如果
用户代理样式表正在启动，那是因为标签属性没有在您的CSS样式表中正确定义。在到达页面稍后引用或“需要”的标签属性设置之前，有可能是拼写错误、忘记括号或分号破坏了样式表。
通过错误检查运行 CSS，例如 CSS LINT 并修复最终检测到的错误。
If
user agent stylesheetis kicking in, it is because the tag property was not properly defined in your css stylesheet.Chances are that a typo, forgotten bracket or semicolon is breaking up your stylesheet BEFORE reaching the tag property settings your page later refers to or "needs".
Run your CSS thru error checking, like CSS LINT and fix whichever errors are eventually detected.
您还可以直接修改这些属性，如下所示：
Works for me in Chrome/Safari。希望有帮助！
You can also directly modify those attributes like so:
Works for me in Chrome/Safari. Hope that helps!
这些
-webkit-margin被margin: 0; 覆盖填充：0；。不用担心他们。额外空间？也许您已经设置了
line-height:？These
-webkit-margin(s) are overwritten bymargin: 0; padding: 0;. Do not worry about them.Extra space? Maybe you've set
line-height:?我有同样的问题。在 Firefox 中显示正确，但在 Chrome 中显示不正确。
我仔细查看了 http://meyerweb.com/eric/tools/css/reset/ 并发现我没有在样式表中声明正文标记的通用行高。将其设置为 1.2，即可在两个浏览器中重新创建正确的布局。
I had the same issue. Displaying correctly in Firefox but not Chrome.
I had a closer look at http://meyerweb.com/eric/tools/css/reset/ and found that I hadn't declared a general line-height for the body tag in my stylesheet. Set it to 1.2 and that recreated the correct layout in both browsers.
只需删除标签之间的空格即可，例如
变为：
Just remove the whitespace between tags e.g.
becomes:
我有同样的问题。菜单链接之间有额外的空间。上述解决方案均无效。对我有用的是负利润。
只需执行以下操作：
新编辑：
这与 -webkit-margins 无关。您的问题很可能发生在行内元素上。发生这种情况是因为内联元素之间有空格或换行符。要解决此问题，您有很多选择：
（HTML5 不关心）font-size: 0;设置为有问题的内联元素容器（android 有问题，如果使用 ems 调整字体大小）解释更多具体内容和示例由 CHRIS COYIER 提供
I had a same problem. Extra space between menu links. None of the above solutions worked. What worked for me, was negative margin.
Just do something like this:
NEW EDIT:
This has nothing to do with -webkit-margins. Most likely your problem occurs with inline elements. This happens because you have spaces or line breaks between your inline elements. To fix this, you have many options:
</li>(HTML5 does not care)font-size: 0;to problematic inline element container (has issues with android and if font-sizing with ems)Explained more specifically and examples by CHRIS COYIER
我的
标记也遇到同样的问题。我尝试设置margin:0;，但没有成功。我发现我习惯性地使用
//注释掉 css 中的行。我从来没有注意到它，因为它以前没有引起任何问题。但是当我在声明之前的行中使用//时，它会导致浏览器完全跳过声明。当我用//换取/**/时，我能够调整保证金。这个故事的寓意：始终使用正确的注释语法！
I was having this same problem with my
<h3>tag. I tried settingmargin:0;, but it didn't work.I found that I was habitually commenting out lines in my css by using
//. I never noticed it because it hadn't caused any problems before. But when I used//in the line before declaring<h3>, it caused the browser to skip the declaration completely. When I traded out//for/**/I was able to adjust the margin.Moral of this story: Always use proper commenting syntax!