Html 显示：内联块额外边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1833734/
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
display: inline-block extra margin
提问by mike
I'm working with a few divs that are set to display: inline-blockand have a set heightand width. In the HTML, if there is a line break after each divthere is an automatic 5px margin add to the right and bottom of the div.
我正在处理一些div设置为display: inline-block并具有设置height和的s width。在 HTML 中，如果在每个换行符之后有一个换行符，则会div在 div 的右侧和底部自动添加 5px 边距。
Example:
例子：
<div>Some Text</div>
<div>Some Text</div>
Is there a property that I've overlooked that will allow me to reset the automatic margin?
是否有我忽略的属性可以让我重置自动保证金？
Update
更新
From what I've found there is no way to remove the margin... except if you either have everything on the same line or, add comments to comment out the line breaks. example:
从我发现的情况来看，无法删除边距……除非您将所有内容都放在同一行上，或者添加注释以注释掉换行符。例子：
<div>Some Text</div><!--
--><div>Some Text</div>
Not the best solution, but still easier to read if you have multiple lines.
不是最好的解决方案，但如果您有多行，仍然更容易阅读。
采纳答案by Daniel
The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1;on the surrounding container.
div 被视为行内元素。正如两个跨度之间的空格或换行符会产生间隙一样，内联块之间也会产生间隙。您可以给它们一个负边距或设置word-spacing: -1;在周围的容器上。
回答by Darwin
White space affects inline elements.
空白影响内联元素。
This should not come as a surprise. We see it every day with span, strong and other inline elements. Set the font size to zero to remove the extra margin.
这应该不足为奇。我们每天都会看到它带有 span、strong 和其他内联元素。将字体大小设置为零以删除额外的边距。
.container {
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
.container > div {
display: inline-block;
margin: 0px;
padding: 0px;
font-size: 15px;
letter-spacing: 1em;
word-spacing: 2em;
}
The example would then look like this.
该示例将如下所示。
<div class="container">
<div>First</div>
<div>Second</div>
</div>
A jsfiddle version of this. http://jsfiddle.net/QtDGJ/1/
一个 jsfiddle 版本。http://jsfiddle.net/QtDGJ/1/
回答by Ben
A year later, stumbled across this question for a inline LIproblem, but have found a great solution that may apply here.
一年后，偶然发现了这个问题的内联LI问题，但找到了一个可能适用于这里的很好的解决方案。
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
vertical-align:bottomon all my LIelements fixed my "extra margin" problem in all browsers.
vertical-align:bottom在我所有的LI元素上修复了我在所有浏览器中的“额外边距”问题。
回答by optimiertes
font-size: 0to parent container
font-size: 0到父容器
(Source: https://twitter.com/garand/status/183253526313566208)
回答by Kuf
Cleaner way to remove those spaces is by using float: left;:
删除这些空格的更干净的方法是使用float: left;：
DEMO
演示
HTML:
HTML：
<div>Some Text</div>
<div>Some Text</div>
CSS:
CSS：
div {
background-color: red;
float: left;
}
I'ts supported in all new browsers. Never got it why back when IE ruled lot's of developers didn't make sue their site works well on firefox/chrome, but today, when IE is down to 14.3 %. anyways, didn't have many issues in IE-9 even thought it's not supported, for example the above demo works fine.
所有新浏览器都支持我。从来不明白为什么当 IE 裁定许多开发人员没有起诉他们的网站在 Firefox/chrome 上运行良好时，但今天，当IE 下降到 14.3 % 时。无论如何，在 IE-9 中没有太多问题，甚至认为它不受支持，例如上面的演示工作正常。
回答by chowey
You can get a vertical space even though you have NO WHITESPACE whatsoever between your inline-block elements.
即使您的内联块元素之间没有任何空格，您也可以获得垂直空间。
For me, this was caused by line-height. The simple fix was:
对我来说，这是由line-height. 简单的修复是：
div.container {
line-height: 0;
}
div.container > * {
line-height: normal;
}
回答by Enchilada
For the record, that margin and padding resetting didn't do the trick for me, but this quote from one of the comments above turned out to be crucial and solved the issue for me: "If i put the divs on the same line it margin disappears."
作为记录，边距和填充重置对我来说没有用，但是上面评论之一的引用结果证明是至关重要的，并为我解决了这个问题：“如果我将 div 放在同一行上边距消失了。”
回答by pixelator
There are a number of workarounds for this issue which involve word-spacing or font size but this article suggests removing the margin with a right margin of -4px;
这个问题有很多解决方法，涉及字间距或字体大小，但本文建议删除右边距为 -4px 的边距；
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
回答by Peter Kriens
After struggling with this issue too many times I found a very elegant solution in HTML 5. In HTML 5 you should not close several (li,p,etc) tags; the ambition to become XML is forever gone. For example, the preferred way to do a list is:
在与这个问题斗争了太多次之后，我在 HTML 5 中找到了一个非常优雅的解决方案。在 HTML 5 中，你不应该关闭几个（li、p 等）标签；成为 XML 的雄心已经一去不复返了。例如，做列表的首选方法是：
<ul>
<li>
<a ...>...</a>
<li>
<a ...>...</a>
</ul>
Browsers MUST close the LI and they must do this without introducing whitespace, solving this problem. If you still have the XML mindset it feels wrong but once you get over that it saves many a nightmare. And this is not a hack since it relies on the wording of the HTML 5 spec. Better, since not closing tags is pervasive I expect no compatibility issues (not tested though). Bonus is that HTML formatters handle this well.
浏览器必须关闭 LI，并且必须在不引入空格的情况下执行此操作，从而解决此问题。如果您仍然有 XML 的心态，那感觉是不对的，但是一旦您克服了这一点，它就会避免许多噩梦。这不是黑客，因为它依赖于 HTML 5 规范的措辞。更好，因为不关闭标签很普遍，我希望没有兼容性问题（虽然没有测试）。额外的好处是 HTML 格式化程序处理得很好。
A little worked out example: http://cssdesk.com/Ls7fK
一个小例子：http: //cssdesk.com/Ls7fK
回答by Jeepstone
Can you post a link to the HTML in question?
您可以发布指向相关 HTML 的链接吗？
Ultimately you should be able to do:
最终你应该能够做到：
div {
margin:0;
padding: 0;
}
to remove the spacing. Is this just in one particular browser or all of them?
删除间距。这只是在一个特定的浏览器中还是在所有浏览器中？
