css 边距和填充区别,CSS - 填充（或边距）不调整容器

感谢您花时间阅读本文。

我尝试使用CSS做一些简单的布局，我有一个容器div，两个孩子使用内联块并排设置：

some content

在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%;

}

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

我确实搜索了一些修复程序，但是框大小调整：border-box;在描述中包含填充和边框的总大小不起作用。

我可能错过了一些简单的事情，但这让我发疯，所以我在这里：)

谢谢！