显示内联块不水平增长，子项填充百分比

Question

当我在内联块元素中放置一个 img 标签并为其添加填充时，父级没有按预期增长。

article {
background: fuchsia;
display: inline-block;
}
img {
padding: 5%;
}

<article>
<img src="https://fakeimg.pl/412x412"/>
</article>

代码笔： https://codepen.io/Yarmolaev/pen/xxxbeJr

Answer 1

它是使用百分比值将父宽度视为参考。在这里，您有一种循环，因为宽度也基于内容。

在这种情况下，浏览器忽略填充以根据其内容查找容器的宽度，然后根据该宽度计算填充并添加到图像中以创建溢出。浏览器不会返回更改容器宽度，因为它将是一个无限循环。

解决此问题的唯一方法是考虑固定值：

article {
background: fuchsia;
display: inline-block;
}
img {
padding: 10px;
}

<article>
<img src="https://fakeimg.pl/412x412"/>
</article>

更多详情请见：https://www.w3.org/TR/css-sizing-3/#percentage-sizing

在大多数情况下，

---

当您使用百分比值并且容器大小基于其内容(缩小以适合行为(时，都会发生这种情况。

另一个示例，其中图像采用其初始宽度的 50%，用于定义容器大小：

article {
background: fuchsia;
float:left;
}
img {
width:50%;
}

<article>
<img src="https://fakeimg.pl/412x412"/>
</article>

类似情况的相关问题：

为什么百分比填充会破坏我的弹性项目？

CSS 网格 - 不必要的分词符

---

如果要保留使用百分比填充，则在Chrome上起作用的技巧是考虑一个不可见的动画，该动画将再次触发宽度计算，并且您将不再有溢出：

article {
background: fuchsia;
display: inline-block;
}
img {
padding: 5%;
animation:change 0.3s infinite;
}
@keyframes change{
to {
padding:5.01%;
}
}

<article>
<img src="https://fakeimg.pl/412x412"/>
</article>