子Div尺寸与父Div一致却出现溢出问题排查

嘿，这个问题我之前踩过坑！你遇到的子div溢出父容器的情况，核心原因是CSS默认盒子模型的特性在搞鬼，咱们一步步拆解：

为什么会溢出？ #

默认情况下，CSS使用的是content-box盒子模型——你给元素设置的height属性，只会定义内容区域的高度，而border、padding这些样式是额外加到内容区域外面的。

看你的代码：父div高度是40px，子div设置了height:40px，同时还有border:1px solid red。这么算下来，子div的实际总高度是：
内容高度40px + 上下border各1px = 42px
比父div的40px高出2px，自然就会溢出了。你看到“多出1px”可能是视觉上的截断或者浏览器渲染的小差异，但本质是总高度超了。

两种快速解决方法 #

方法一：改用border-box盒子模型（推荐） #

给子div加上box-sizing: border-box;，这样你设置的height就会包含border和padding，元素的总高度会被严格限制在你设定的数值内，border会往内容区域里收缩，不会超出父容器。

修改后的代码：

<div style="background:blue;width:500px;height:40px">
  <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;box-sizing: border-box;"> </div>
  <div style="border:1px solid black;height:40px;font-size:0px;display:inline-block;width:70%;box-sizing: border-box;"> </div>
</div>

方法二：手动调整内容高度 #

如果你不想改盒子模型，可以把子女div的height改成38px——这样加上上下各1px的border，总高度刚好是40px，和父容器一致。不过这个方法不够灵活，后续如果border宽度变化，你得跟着修改height数值，不如第一种方法省心。

额外说明 #

你设置font-size:0是为了解决inline-block元素之间的空白间隙，这个做法很靠谱，和这次的高度溢出问题没关系，不用调整~

内容的提问来源于stack exchange，提问作者ParryV