当我们再写自己的网页的时候，我们通常会在一个大盒子里面放若干个小盒子，想要把这若干个盒子排成一排，，倘若我们给每个小盒子设置display:inline-block；并且设置好宽高之后，理论上是会排成一排的，但是在实际中却会出现最后一个盒子被挤掉的情况。
我们可以发现，小盒子之间出现了莫名的小空隙，而且这些空隙将后面的小盒子挤到了下一行。
代码如下
HTML部分
<body>
<div class="box">
<div class="child red">1</div>
<div class="child blue">2</div>
<div class="child green">3</div>
</div>
</body>
CSS部分
<style>
.box {
width: 150px;
height: 150px;
border: 1px solid #666;
font-size: 0px;
}
.child {
width: 50px;
height: 50px;
display: inline-block;
font-size: 16px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
</style>
当我们给大盒子设置了 font-size: 0px; 就会发现，这个边距就会被取消掉了
这是由于我们在写代码是的回车造成的，我们每一个在盒子后面的回车就会造成一个文本节点，这个文本节点会占用我们盒子的一些距离。
解决方法也很简单，既然你是文本，我直接将你文本大小弄成0不就行了，在大盒子中设置font-size:0;就可以很好地实现我们的效果。
————————————————
版权声明：本文为CSDN博主「Zhou YiHang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/z914020826/article/details/122454527
标签：盒子,color,小盒子,background,font,css,size From： https://www.cnblogs.com/net-sky/p/16919340.html