CSS - padding（或margin）无法调整容器大小

Question

感谢您抽出时间阅读此文。

我正在尝试使用CSS进行简单的布局，其中我有一个容器div，两个子元素并排设置为inline-block：

<div class="info-window">
    <img class="image" src="myURL"/>
    <div class=description">some content</div>
</div>

在CSS中，我设置了容器的高度，自动调整图像大小，使其高度为100％，并保持比例。对于描述，我没有指定任何大小（预计它将根据其内容进行设置）。

.info-window .image {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: auto;
}

.info-window .description {
  display: inline-block;
  vertical-align: top;
}

这很好用，但是当我尝试在两个元素之间添加一些填充或边距时，就会出现问题。例如：为描述（即右侧的项目）添加padding-left。请注意，使用image的padding-right或margin也会产生相同的行为。

.info-window .description {
  display: inline-block;
  vertical-align: top;
  padding-left: 5%;
}

当我这样做时，容器的大小不会正确地调整为其子元素的总宽度。看起来尺寸是在添加填充之前计算的。

您可以在此处检查此示例：https://jsfiddle.net/tot22292/。请注意右侧文本被切断。

我尝试了一些修复方法，但是使用box-sizing: border-box;将填充和边框包含在描述的总尺寸中并不能解决问题。

我可能错过了一些简单的东西，但这让我发疯了，所以我来这里寻求帮助：）

谢谢！

- Etienne L

---

你的fiddle中图片的src无法工作。 - Claire

好的，这对我有效，但是这里有一个使用另一张图片链接的版本：https://jsfiddle.net/tot22292/3/ - Etienne L

我没有任何规范的链接，但这绝对是因为填充是百分比值。这也是有道理的。填充或边距的百分比值是相对于父元素的宽度的。如果样式表现如您所期望的那样，它必然会改变父元素的宽度。这将影响填充。这变得循环。您能否使用非百分比值来设置填充？https://jsfiddle.net/wrt9v9xs/ - Joseph Marikle

Answer 1

（决定将此转换为答案。希望有人能填写浏览器如何确定填充的原因。）

我没有任何规范的链接，但这绝对是因为填充是百分比值。这也是有道理的。填充或边距的百分比值是相对于父元素宽度的。如果样式表现出您预期的行为，则必然会更改父元素宽度。

基本上，使用您当前的代码，填充会影响宽度，而宽度会影响填充。为了解决这个问题，浏览器的渲染引擎似乎只使用预填充宽度以避免无限循环。 "解决方案" 将是使用静态填充值而不是百分比。

.info-window {
  display: inline-block;
  white-space: nowrap;
  overflow-x: hidden;
}

.info-window .image {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: auto;
}

.info-window .description {
  display: inline-block;
  vertical-align: top;
  padding-left: 2em;
}

.info-window .title {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
}

<div id="test" style="height:150px;">
  <div class="info-window">
    <img class="image" src="//placehold.it/312" />
    <div class="description">
      <span class="title">Some text</span>
      <br/> 5
    </div>
  </div>
</div>

编辑：
好的，在规范中已经解决了这个问题。

如果包含块的宽度依赖于该元素，则CSS 2.1中的结果布局将未定义。

8.4填充属性

未定义的值意味着由渲染引擎决定，因此至少在Chrome中，它似乎会使用预先添加的宽度作为值进行故障转移。

- Joseph Marikle

---

该死！我知道我错过了某些简单的东西。显然这就是发生的事情，非常感谢你Joseph! - Etienne L

Answer 2

您可以将元素的width更改为基于百分比而不是基于auto，并使用基于像素而不是百分比的填充。

.info-window .image {
  display: inline-block;
  vertical-align: top;
  width:50%;
  height: auto;
}

.info-window .description {
  display: inline-block;
  vertical-align: top;
  width:50%;
  padding-left: 10px;
}

代码片段: https://jsfiddle.net/wrt9v9xs/2/

- Claire

---

谢谢Tom。但这会破坏图像比例。 - Etienne L

所以将 height 更改为 auto。更新的 fiddle。 - Claire