如何消除嵌套边框之间的空白间隙？

你遇到的这个嵌套容器间的空白间隙，本质是盒模型规则差异导致的，并非浏览器Bug，Chrome和Edge的表现都是符合标准的。

问题原因拆解 #

• #container1使用默认的content-box盒模型：它设置的width:200px和height:200px仅指内容区域的尺寸，5px的蓝色边框是额外加到外面的，所以#container1的实际总尺寸是210px×210px，内部内容区域还是200px×200px。
• #container2使用border-box盒模型：它的width:200px包含了5px的红色边框，所以实际内容区域是190px宽，但总宽度（含边框）是200px，刚好填满#container1的内容区域。

这就导致#container2的红色边框和#container1的蓝色边框之间，隔着#container1的边框宽度（5px），也就是你看到的空白间隙。

两种快速解决方法 #

方法一：统一盒模型+自适应宽度（推荐）

让两个容器都使用border-box盒模型，同时把#container2的宽度改为100%自适应父容器，这样能彻底避免尺寸计算错误：

#container1 { 
  width: 200px; 
  height: 200px; 
  border: 5px solid blue; 
  box-sizing: border-box; /* 统一盒模型 */
}
#container2 { 
  width: 100%; /* 自适应父容器内容宽度 */
  height: 100%; 
  border: 5px solid red; 
  box-sizing: border-box; 
}
#bar { background: orange; height: 24px; width: 100%; }

修改后，#container1的总尺寸固定为200px×200px（含边框），#container2会完全填满#container1的内部区域，红色边框会紧贴蓝色边框的内侧，间隙直接消失。

方法二：计算容器宽度（不修改父容器盒模型）

如果不想改动#container1的盒模型，可以用calc()计算#container2的宽度，让它的总尺寸刚好填满父容器的内容区域：

#container1 { 
  width: 200px; 
  height: 200px; 
  border: 5px solid blue; 
}
#container2 { 
  width: calc(100% - 10px); /* 父内容宽度减去自身左右边框总宽度 */
  height: 100%; 
  border: 5px solid red; 
  box-sizing: border-box; 
}
#bar { background: orange; height: 24px; width: 100%; }

这种方式也能让#container2的红色边框紧贴#container1的蓝色边框内侧，消除间隙。

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