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

Question

当我将 img 标签放入 inline-block 元素并为其填充时，parent 没有按预期增长。

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>

类似情况的相关问题：

一个 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>

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

Display inline-block not growing horizontally with child having padding in per cent

css

inline

padding