我想根据容器div的大小并排放置两个div。第二个div位于第一个div之下，因为它们之间有一个4像素的间隙。为什么，更重要的是那是什么？边距，填充和边框为0px，使其更清晰。
<div id='container' width='300'>
<div id='left' width='150'></div>
<div id='right' width='150'></div>
</div>
我知道你可以使用float来达到目标，但我想知道原因。
另外我注意到当我得到一个元素的width（）时，我没有得到调试窗口中的相同数字。任何线索？
谢谢！
编辑：好的，我知道它是一个＆＃39; ＆＃39;他们之间因为新的线条特征。如果它的内联块＆＃39;它似乎并不重要。或者＆＃39;阻止＆＃39;虽然。但是，将容器设置为显示为＆＃39; flex＆＃39;似乎是一个解决方案。
（还要感谢你提供关于如何删除空间的建议，即使div之间有空白字符！我仍然不能因为声誉低而悲伤地投票......）
答案 0 :(得分：2)
比较
<div>
a
b
</div>
使用：
<div>
ab
</div>
display: inline-block元素被视为文本。
它们之间有空格，因为它们是标记中的空格字符的内联元素。
将第二个div的开始标记放在第一个div的结束标记之后，它们之间没有任何空格，制表符或换行符。
答案 1 :(得分：1)
问题是内联/内联块元素尊重空格，包括换行符，它们也占用空间。因此，如果删除元素之间的所有空格，将解决问题：
<div id='container'>
<div id='left'> </div><div id='right'> </div>
</div>
当然手动（或编程）删除标签之间的所有空格并不是很优雅的解决方案。不幸的是，没有干净的CSS属性可以忽略它们。但是，您可以在包装容器级别设置font-size: 0并将其重置为元素级别上的必要字体值。这将有效地使白色空间成为0大小：
#container {
/* ... */
font-size: 0;
}
#container > * {
font-size: 16px;
}
答案 2 :(得分：0)
因为内联块元素： -
您可以尝试这样： -
<div id='container'>
<div id='left'> </div><div id='right'> </div>
</div>
OR
<div id='container'>
<div id='left'> </div><!--
--><div id='right'> </div>
</div>