父母是内联块，孩子有 % padding = 奇怪的行为答案

【问题标题】：Parent is inline-block and child has % padding = strange behaviour父母是内联块，孩子有 % padding = 奇怪的行为
【发布时间】：2022-10-25 14:19:16
【问题描述】：

我做 CSS 已经有一段时间了，但不知道这里发生了什么。感觉真的很愚蠢:)你能解释一下这种行为吗？

.parent {
  display:inline-block;
}

.child {
    border: 2px solid red;
    padding: 20px; /* this works as expected */
    padding: 20%;
    box-sizing: border-box; /* makes no difference */
}

<div class="parent">
  <div class="child">CSSisAwesome</div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

如this CSSTricks article 中所见，使用百分比单位的填充与父容器相关，而不是元素内的内容。您在代码 sn-p 中设置的 20% 填充与 .parent div 的尺寸有关，与 .child div 中的内容无关。

【讨论】：

【解决方案2】：

如果您使用 % 作为单位，则 Parent 应该具有固定的宽度和高度

【讨论】：