css - 显示内联 block 不水平增长， child 有填充百分比

Question

当我将一个 img 标签放在一个内联 block 元素中并为其添加填充时，父元素没有按应有的方式增长。

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>

类似情况的相关问题:

Why does percentage padding break my flex item?

CSS Grid - unnecessary word break

---

如果想继续使用百分比填充，hack 可以在 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>