CSS -webkit-margin 在文本上添加不需要的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5721966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
-webkit-margin adds unwanted margin on texts
提问by tbleckert
This hadn't hit me until now (and this is not only in webkit browsers). On all texts in like ptags, h1tags etc... there's an extra space over and below the text.
直到现在我才想到这一点（这不仅在 webkit 浏览器中）。在p标签、h1标签等中的所有文本上……文本上方和下方都有一个额外的空间。
In chrome I found this:
在 chrome 中，我发现了这个：
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?
这使得某些地方的对齐错误。是的，我正在使用重置样式表，并且没有添加填充或边距。几乎是一个基本的设置。为什么会这样，我该如何解决？
采纳答案by JacobEvelyn
You can also directly modify those attributes like so:
您还可以直接修改这些属性，如下所示：
-webkit-margin-before:0em;
-webkit-margin-after:0em;
Works for me in Chrome/Safari. Hope that helps!
在 Chrome/Safari 中为我工作。希望有帮助！
回答by atlavis
These -webkit-margin(s) are overwritten by margin: 0; padding: 0;. Do not worry about them.
这些-webkit-margin(s) 被覆盖margin: 0; padding: 0;。不要担心他们。
Extra space? Maybe you've set line-height:?
额外的空间？也许你已经设置了line-height:？
回答by Edwin - EEDSGN
I had the same issue. Displaying correctly in Firefox but not Chrome.
我遇到过同样的问题。在 Firefox 中正确显示，但在 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.
我仔细查看了http://meyerweb.com/eric/tools/css/reset/，发现我没有在样式表中为 body 标记声明一般的行高。将其设置为 1.2 并在两个浏览器中重新创建正确的布局。
回答by ruuter
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:
我有同样的问题。菜单链接之间的额外空间。上述解决方案均无效。对我有用的是负利润率。只是做这样的事情：
margin: 0 -2px;
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:
这与 -webkit-margins 无关。您的问题很可能发生在内联元素上。发生这种情况是因为您的内联元素之间有空格或换行符。要解决此问题，您有很多选择：
- remove all spaces and line-breaks between inline elements
- skip element closing tag - for example
</li>(HTML5 does not care) - negative margin (as stated above - problems with IE6/7 - who cares, upgrade ;)
- set
font-size: 0;to problematic inline element container (has issues with android and if font-sizing with ems) - give up inline and use float (this way you loose text-align:center)
- 删除内联元素之间的所有空格和换行符
- 跳过元素结束标记 - 例如
</li>（HTML5 不关心） - 负边距（如上所述 - IE6/7 的问题 - 谁在乎，升级；）
- 设置
font-size: 0;为有问题的内联元素容器（android 有问题，如果使用 em 调整字体大小） - 放弃内联并使用浮动（这样你就会失去 text-align:center）
回答by Craig
Just remove the whitespace between tags e.g.
只需删除标签之间的空格，例如
<p id="one"></p>
<p id="two"></p>
becomes:
变成：
<p id="one"></p><p id="two"></p>
回答by story
I was having this same problem with my <h3>tag. I tried setting margin:0;, but it didn't work.
我的<h3>标签也有同样的问题。我试过设置margin:0;，但没有用。
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.
我发现我习惯性地使用//. 我从来没有注意到它，因为它以前没有引起任何问题。但是当我//在声明之前的行中使用时<h3>，它导致浏览器完全跳过声明。当我//换出时，/**/我能够调整保证金。
Moral of this story: Always use proper commenting syntax!
这个故事的寓意：始终使用正确的注释语法！
回答by d_le_nen
For me, the picture was:
对我来说，这张图是：
* {margin:0;padding:0;}
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.
无论如何，Firefox (FF) 和 Google Chrome 的利润率都是 0.67em。FF 显示了它的默认边距，但划掉了，但还是应用了它。GC 显示其默认边距 (-webkit-margin-before...) 未交叉。
I applied
我申请了
* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}
but to no avail, although GC now showed its default margin crossed.
但无济于事，尽管 GC 现在显示其默认保证金已交叉。
I found out, that I can apply either
我发现，我可以申请
line-height: 0;
or
或者
font-size: 0;
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.
以达到预期的效果。这是有道理的，如果有人假设，边距是 .67em - 类型。如果有人能解释一下，为什么浏览器通过应用依赖于行高的、不可移动的边距让我们的生活变得悲惨，我将不胜感激。
回答by Gaui
For me in Chrome it was some 40px padding-startthat was causing this. I did the following that worked:
对我来说，Chrome 是一些 40pxpadding-start导致了这种情况。我做了以下工作：
ul {
-webkit-padding-start: 0em;
}
回答by andromedainiative
-webkit-margin-before: 0em;
-webkit-padding-start: 0;
-webkit-margin-after: 0em;
This solved it for me when I was having this exact problem.
当我遇到这个确切的问题时，这为我解决了它。
回答by Peter
In your css file add the following.
在您的 css 文件中添加以下内容。
* {
-webkit-margin-before: 0em !important;
-webkit-margin-after: 0em !important;
}
'*' selects all css elements and overrides the webkit-margin.
'*' 选择所有 css 元素并覆盖 webkit-margin。
