Html 显示内联块和水平堆叠时如何消除div之间的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14241696/
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
How to get rid of space between divs when display inline-block and stacked horizontally?
提问by Matt
I have three divs horizontally stacked side by side to one another and these divs are set to display: inline-block. However, I have noticed that even with using some sort of CSS reset they produce a small 4px distance between each other? Why does this occur? Is there a way to globally get rid of this from happening or do I just have to shift the divs to the left -4px?
我有三个并排水平堆叠的 div，这些 div 设置为显示：inline-block。但是，我注意到即使使用某种 CSS 重置，它们之间也会产生 4px 的小距离？为什么会出现这种情况？有没有办法在全球范围内摆脱这种情况的发生，或者我只需要将 div 向左移动 -4px？
回答by thomaux
This is caused by the fact your browser will render the DIV's inline and as with words, they are separated by spaces.
这是因为您的浏览器将呈现 DIV 的内联，并且与单词一样，它们由空格分隔。
The width of the space is determined by the font-size, hence an easy trick is to set the font-size of your containing element to 0 and then reset the font-size in your inline divs.
空间的宽度由字体大小决定，因此一个简单的技巧是将包含元素的字体大小设置为 0，然后在您的内联 div 中重置字体大小。
#container { font-size: 0; }
#container > div {font-size: 1rem; display: inline-block; }
I have demonstrated this in this Fiddle.
我已经在这个Fiddle 中演示了这一点。
Take a look at this articlefor more info.
看看这篇文章了解更多信息。
回答by Viktor S.
Suppose that is because of line break characters after each closing tag. Those are handled as spaces in HTML. Try to remove them. Here are few demos:
假设这是因为每个结束标记后的换行符。这些在 HTML 中作为空格处理。尝试删除它们。这里有几个演示：
http://jsfiddle.net/eeRFC/- with spaces
http://jsfiddle.net/eeRFC/- 带空格
<div>test</div>
<div>test</div>
<div>test</div>
http://jsfiddle.net/eeRFC/1/- with no spaces
http://jsfiddle.net/eeRFC/1/- 没有空格
<div>test
</div><div>test
</div><div>test
</div>
And common CSS:
和常见的 CSS：
div {
border:solid 1px black;
display:inline-block;
}
回答by Learner
Get rid of the new line between end of the prior div and start of next div For example replace the following:
去掉前一个 div 的结尾和下一个 div 的开头之间的新行例如替换以下内容：
<div id="div1">
Div Item 1
</div>
<div id="div2">
Div Item 2
</div>
with
和
<div id="div1">
Div Item 1
</div><div id="div2">
Div Item 2
</div>
回答by dopeddude
回答by Mike Hill
You most likely have newlines between the divs in your HTML, right? If there are any separators between divs then the browser will display spaces between them.
您很可能在 HTML 中的 div 之间有换行符，对吗？如果 div 之间有任何分隔符，则浏览器将在它们之间显示空格。
The following example has spaces between the divs:
以下示例在 div 之间有空格：
<style>
* {
margin: 0;
border: 1px solid black;
}
div {
display: inline-block;
}
</style>
<div>
Div1
</div>
<div>
Div2
</div>
<div>
Div3
</div>
There are two methods you can use to remove the spaces between the divs. Either take away the separators between the div elements like so:
您可以使用两种方法来删除 div 之间的空格。要么去掉 div 元素之间的分隔符，如下所示：
<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>
Or make your divs floating elements:
或者让你的 div 浮动元素：
...
div {
display: inline-block;
float: left;
}
...
Hope that helps!
希望有帮助！
Edit:
Also see related SO question: How can I stop the new line from adding a space between my list items in HTML
编辑：
另请参阅相关的 SO 问题：如何阻止新行在 HTML 中的列表项之间添加空格
