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

【问题标题】：Display inline-block not growing horizontally with child having padding in per cent显示内联块不水平增长，子级填充百分比
【发布时间】：2020-02-05 21:46:30
【问题描述】：

当我在 inline-block 元素中放置一个 img 标签并为其提供填充时，父级并没有按应有的方式增长。

article {
  background: fuchsia;
  display: inline-block;
}

img {
  padding: 5%;
}

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

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

【问题讨论】：

标签： css inline padding

【解决方案1】：

它是使用百分比值来考虑父宽度作为参考。在这里你有一种循环，因为宽度也是基于内容的。

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

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

article {
  background: fuchsia;
  display: inline-block;
}

img {
  padding: 10px;
}

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

这将发生在您使用百分比值并且容器大小基于其内容（缩小以适应行为）的大多数情况下。

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

article {
  background: fuchsia;
  float:left;
}

img {
  width:50%;
}

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

CSS Grid - unnecessary word break

如果想继续使用百分比填充，在 Chrome 上工作的 hack 是考虑一个不可见的动画，它将再次触发宽度的计算，您将不再有溢出：

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>

【讨论】：

我假设是这样的，但这似乎是正确的。谢谢你的解释！
非常感谢您的努力。真的很感激。