<分区>
html - 为什么明显合适的子内联 block 会溢出？
如果我将蓝色 div 的宽度从 212px 更改为 211px，为什么最后一个绿色 div 会溢出？ 绿色 div 之间的空格来自哪里？
开发人员工具显示没有边距、没有填充、没有边框，根本没有任何可以产生这些间隙的东西。它们来自哪里？
212px 宽度 --> 无溢出
211px 宽度 --> 溢出
#test {
background-color: blue;
height: 50px;
width: 211px;
}
#test>div {
display: inline-block;
background-color: green;
height: 50px;
width: 50px;
}<div id="test">
<div></div>
<div></div>
<div></div>
<div></div>
</div>最佳答案
你把你的div变成了内联元素，而内联元素对你代码中的空白很敏感，会占用空间。删除空格和间隙消失:
#test {
background-color: blue;
height: 50px;
width: 211px;
}
#test>div {
display: inline-block;
background-color: green;
height: 50px;
width: 50px;
}<div id="test">
<div></div><div></div><div></div><div></div>
</div>关于html - 为什么明显合适的子内联 block 会溢出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58490961/