CSS - 填充（或边距）不调整容器大小

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 添加到描述中，即右侧的项目。请注意，该行为与图像上的 padding-ight 或边距相同。

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

当我这样做时，容器的大小不适合其子项的总宽度。看起来大小是在添加填充之前计算的。

你可以在这里查看这个小提琴：https://jsfiddle.net/tot22292/ 看看右边的文字是怎么剪的。

我确实搜索了一些修复，但 box-sizing:border-box;在描述的总大小中包含填充和边框并不能解决问题。

我可能错过了一些简单的东西，但这让我发疯了，所以我在这里:)

谢谢！

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 Padding properties

未定义的值意味着它取决于渲染引擎，因此听起来 chrome 至少只是决定使用该值的预填充宽度进行故障转移。

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/