设置box-sizing:border-box后<div>内容仍溢出，原因何在？

你的理解存在偏差——MDN对border-box的描述完全正确，问题出在你忽略了img作为替换元素的默认渲染规则，和border-box本身无关。

核心逻辑拆解 #

border-box的作用是控制当前元素的盒模型计算：给.gallery设置box-sizing: border-box后，它的width:50%已经包含了左右各5px的边框和10px的内边距，所以.gallery的总宽度不会超出父容器的50%，这部分完全符合MDN描述。

但img是替换元素，默认会按照自身的固有宽高（即图片本身的像素尺寸）渲染，不会自动收缩去适配父元素的内容盒。如果你的图片原始宽度大于.gallery的内容盒宽度（计算方式：50%父容器宽度 - 5px×2边框 -10px×2内边距），自然就会溢出。

代码验证与修复 #

假设你的代码结构如下：

HTML

<div class="gallery">
  <img src="your-image.jpg" alt="gallery image">
</div>

原CSS

.gallery {
  border:5px solid red;
  width:50%;
  box-sizing:border-box;
  padding:10px;
}
/* 移除了img的样式 */

要让img适配.gallery的内容盒，只需要给img添加尺寸限制：

.gallery img {
  width: 100%;
  height: auto; /* 保持图片比例，避免拉伸变形 */
}

这样img就会自动占满.gallery的内容盒宽度，同时按比例调整高度，不会再溢出。

补充说明 #

如果只是想临时隐藏溢出部分（不推荐，会破坏图片完整性），也可以给.gallery加overflow: hidden;，但优先推荐给img设置自适应尺寸的方案。

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