如何避免内边距（padding）增大Div元素的尺寸？

嘿，这个问题我之前也踩过坑！你提到的box-sizing: border-box没生效其实是有原因的——咱们先理清楚为什么会这样，再给你几个可行的解决方案。

为什么box-sizing在这里不生效？ #

box-sizing: border-box的作用是让元素的width/height值包含padding和border，但CSS有个默认规则：元素的实际高度不能小于其内容区+padding+border的最小高度。当你给div设置height: 0，同时加上上下各12px的padding时，浏览器会自动把元素高度撑开成24px（12px*2），这是box-sizing无法覆盖的最小高度限制。

可行的解决方案 #

方案1：把padding转移到内部元素 #

这是最稳妥的方法，结构清晰且兼容性拉满：

/* 外部容器保持高度0和溢出隐藏 */
.collapsed-box {
  height: 0;
  overflow: hidden;
}
/* 内部元素承载padding和背景样式 */
.collapsed-box__content {
  padding: 12px;
  background: tan;
}

<div class="collapsed-box">
  <div class="collapsed-box__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

外部容器因为没有padding，设置height:0后不会被撑开，内部元素的padding会被overflow:hidden完全隐藏。

方案2：用绝对定位脱离文档流 #

如果不想额外增加DOM元素，可以用绝对定位让内容不影响外部容器尺寸：

.collapsed-box {
  height: 0;
  overflow: hidden;
  position: relative; /* 给内部绝对定位元素做参照 */
}
.collapsed-box__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 撑满容器宽度 */
  padding: 12px;
  background: tan;
}

HTML结构和方案1一致，绝对定位的元素脱离了文档流，不会撑开外部容器，刚好满足你的需求。

方案3：用负margin抵消padding（快速hack） #

如果想保持单个元素的结构，可以用负margin直接抵消padding的撑开效果：

div {
  height: 0;
  overflow: hidden;
  padding: 12px;
  margin: -12px; /* 负margin数值和padding一致，抵消尺寸变化 */
  background: tan;
}

注意：这个方法会让元素的位置轻微偏移，如果该div处于复杂布局中，可能需要额外调整定位，但单纯实现“padding不撑开height:0的元素”是有效的。

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