nowrap内嵌块之间的空间
我想要有几个块元素彼此相邻，这需要完整的浏览器宽度。
使用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 Demo 。
这是没有填充，没有余量，没有边界，没有抵消。
这是因为inline（-block）元素（换行符和几个制表符作为空间）之间的空格字符，可以通过以下方式对空间进行注释来解决这个问题：
<div style="background: red;"></div><!-- --><div style="background: yellow;"></div><!-- --><div style="background: green;"></div><!-- --><div style="background: blue;"></div>
在线演示 。
实际上，这不是一个bug，这是内联元素的正常行为。 就像当你在一行文字旁边放置一个图像，或者在input元素旁边放一个button一样。
有几种方法可以删除内联（-block）元素之间的空间：
- 最小化HTML
- 负边际
- 评论空白空间
- 打破结束标记
- 将父级的字体大小设置为零，然后将其重置为儿童
- 浮动内联项目
- 使用flexbox
检查克里斯Coyier的文章 ，或在SO上的这些类似的主题：
- 为什么图像和导航栏之间存在差距？
- 如何去除内嵌块元素之间的空间？
- 内嵌块列表项之间的空格
- 如何从HTML中删除“隐形空间”
我遇到过这个问题一次，我用这个CSS属性。 有时它的帮助。
font-size:0;
试着把所有的div分成一个一个。 有时候，空白空间并不是我们想要的。
