父元素为inline-block时子元素使用百分比padding的异常表现

核心原因：循环依赖的布局计算 #

CSS中，所有方向的padding百分比值，都是以父元素的包含块宽度为基准计算，和元素自身尺寸、父元素高度无关。

而你的父元素是inline-block，它的默认宽度是「收缩包裹」模式——即宽度由子元素的内容、内边距、边框等尺寸共同决定。这就形成了循环：

1. 子元素的20% padding需要父元素的宽度来计算具体值
2. 父元素的宽度又需要子元素的总尺寸（内容+padding）来确定

浏览器的布局引擎会反复迭代计算这两个值，最终的结果就是父元素和子元素的宽度会被不断撑开，远超出你基于内容的预期。

为什么box-sizing: border-box没用？ #

box-sizing只是改变元素自身总宽度的计算逻辑：

• content-box（默认）：元素总宽度 = width + padding + border
• border-box：元素总宽度 = width（包含padding和border）

但它完全不影响百分比padding的计算基准——不管哪种模式，padding的百分比依然是基于父元素的宽度，所以这个属性解决不了循环依赖的问题。

解决方案 #

• 给父元素设置明确宽度：比如给.parent加width: 300px，这样子元素的20% padding就有了固定的计算基准，布局会符合预期。
• 改用非百分比单位：把padding: 20%换成padding: 2rem或padding: 20px这类固定/相对自身字体的单位，避免依赖父元素宽度。
• 修改父元素的display属性：如果场景允许，把.parent改成display: block，让它占满容器宽度，此时子元素的百分比padding会基于容器宽度计算，不会出现循环。

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