nowrap内联块之间的空间

Question

我想要几个相邻的块元素，它们占据整个浏览器的宽度。

使用white-space: nowrap，效果很好，但是在一个元素和另一个元素之间存在几个像素的随机空间：

body { margin: 0; padding: 0; }

#container1 { white-space: nowrap; position: absolute; width: 100%; }

#container1 div { display: inline-block; width: 100%; height: 200px; }

<div id="container1">

    <div style="background: red;"></div>

    <div style="background: yellow;"></div>

    <div style="background: green;"></div>

    <div style="background: blue;"></div>

</div>

这是jsBin演示。

没有填充，没有边距，没有边框，没有偏移。

Answer 1

这是因为inline（-block）元素之间有一个空格字符（一个换行符和一些制表符算作一个空格），可以通过这样注释空格来解决此问题：<div style="background: red;"></div><!--&nbsp;&nbsp;--><div style="background: yellow;"></div><!--&nbsp;&nbsp;--><div style="background: green;"></div><!--&nbsp;&nbsp;--><div style="background: blue;"></div>在线演示。实际上，这不是错误，而是内联元素的正常行为。就像将图像放置在文本行旁边，或在输入元素旁边放置按钮一样。有几种方法可以删除inline（-block）元素之间的空间：最小化HTML负边距注释掉空白打破结束标记将父级的字体大小设置为零，然后为子级重置浮动内联项目使用flexbox

Answer 2

我曾经遇到过这个问题，并且使用了此CSS属性。有时它的帮助。font-size:0;