CSS子元素padding/margin被父元素宽度忽略的解决方法咨询

我有一个三层嵌套的HTML组件，组件整体尺寸由内层绿色div的固定宽高（100px×100px）控制。要求中层蓝色div和外层红色div围绕内层div留出15%的间隙（中层与外层尺寸一致），但尝试以下两种方式时均出现问题：

• 给中层div添加15% padding
• 给内层div添加15% margin

两种方式下，中层和外层仅在垂直方向撑开了15%的间隙，水平方向无法适配，内层div会向右溢出中层/外层div的边界。

CSS中，padding和margin的百分比值无论水平还是垂直方向，都是相对于父元素的宽度。而外层div是inline-block、中层是block，宽度由内容自动撑开，这就导致了循环依赖：

1. 初始外层宽度由内层的100px决定
2. 水平方向的15% padding/margin基于外层宽度计算
3. 计算后的padding/margin会撑开中层/外层的宽度，进而改变百分比的计算基数
4. 浏览器无法完成无限循环的计算，最终导致水平方向间隙失效、内层溢出

方法1：使用CSS变量固定间隙比例（推荐） #

通过CSS变量定义内层尺寸和间隙比例，直接计算出固定的间隙大小，打破循环依赖，确保四周间隙一致且随内层尺寸动态调整：

/* 定义全局变量 */
:root {
  --inner-width: 100px;
  --inner-height: 100px;
  --gap-rate: 15%;
  /* 计算间隙大小：内层尺寸 × 间隙比例 */
  --gap-size: calc(var(--inner-width) * var(--gap-rate) / 100%);
}

/* 统一盒模型，避免border影响尺寸计算 */
* {
  box-sizing: border-box;
}

.outer {
  border: red 1px dashed;
  display: inline-block;
  margin-left: 50px;
}

.middle {
  border: blue 1px dashed;
  display: block;
  /* 使用计算后的固定间隙作为padding */
  padding: var(--gap-size);
}

.inner {
  border: forestgreen 1px dashed;
  display: block;
  height: var(--inner-height);
  width: var(--inner-width);
}

方法2：使用Flex布局自动适配 #

将外层和中层改为Flex容器，让它们自动包裹内层+间隙的整体尺寸，同时配合box-sizing: border-box确保尺寸计算准确：

* {
  box-sizing: border-box;
}

.outer {
  border: red 1px dashed;
  /* 用inline-flex替代inline-block，自动适配内容宽度 */
  display: inline-flex;
  margin-left: 50px;
}

.middle {
  border: blue 1px dashed;
  /* 用flex容器包裹内层 */
  display: flex;
  padding: 15px; /* 若要百分比间隙，仍需配合CSS变量 */
}

.inner {
  border: forestgreen 1px dashed;
  height: 100px;
  width: 100px;
}

方法3：强制固定中层尺寸 #

如果内层尺寸固定不变，可直接计算出中层的尺寸（内层尺寸 + 2×间隙），避免百分比计算的循环问题：

* {
  box-sizing: border-box;
}

.outer {
  border: red 1px dashed;
  display: inline-block;
  margin-left: 50px;
}

.middle {
  border: blue 1px dashed;
  display: block;
  /* 内层100px + 左右各15px间隙 = 130px */
  width: 130px;
  height: 130px;
  padding: 15px;
}

.inner {
  border: forestgreen 1px dashed;
  display: block;
  height: 100px;
  width: 100px;
}

HTML结构无需修改：

<div class="outer">
  <label class="middle">
    <div class="inner"></div>
  </label>
</div>
<div class="outer">
  <label class="middle">
    <div class="inner"></div>
  </label>
</div>
<div class="outer">
  <label class="middle">
    <div class="inner"></div>
  </label>
</div>

CSS代码使用方法1的实现：

:root {
  --inner-width: 100px;
  --inner-height: 100px;
  --gap-rate: 15%;
  --gap-size: calc(var(--inner-width) * var(--gap-rate) / 100%);
}

* {
  box-sizing: border-box;
}

.outer {
  border: red 1px dashed;
  display: inline-block;
  margin-left: 50px;
}

.middle {
  border: blue 1px dashed;
  display: block;
  padding: var(--gap-size);
}

.inner {
  border: forestgreen 1px dashed;
  display: block;
  height: var(--inner-height);
  width: var(--inner-width);
}

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