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

这是因为内联(-block)元素之间的空格字符(换行符和几个选项卡计为空格),这可以通过以这种方式注释该空格来修复:

<div style="background: red;"></div><!-- 
 --><div style="background: yellow;"></div><!-- 
 --><div style="background: green;"></div><!-- 
 --><div style="background: blue;"></div>

在线演示.

实际上,它不是一个bug,它是内联元素的正常行为; 就像将图像放在一行文本旁边,或者在输入元素旁边放一个按钮一样.

有几种方法可以删除内联(-block)元素之间的空格:

• 最小化HTML
• 负利润
• 评论白色空间
• 打破结束标签
• 将父项的字体大小设置为零,然后重置为子项的字体大小
• 浮动内联项目
• 使用flexbox

检查Chris Coyier的文章,或关于SO的这些类似主题:

• 为什么图像和导航栏之间存在差距
• 如何删除内联块元素之间的空格？
• 内联块列表项之间的空格
• 如何从HTML中删除"不可见空间"