阻止不垂直扩展以进行内联填充

Question

一个简单的块元素不会垂直扩展，除非它的内容是内联块或块。

请参阅小提琴：https://jsfiddle.net/4148xjvv/7/

或者看代码：

HTML：

<div class='parent'>
  <span class='padding'>Inline</span>
</div>

<br><br>

<div class='parent'>
  <span class='inline-block padding'>Inline-block</span>
</div>

<br><br>

<div class='parent'>
  <div class='padding'>Block</div>
</div>

CSS：

.parent {
  background-color: red;
  color: white;
}

.padding {
  padding: 10px;
}

.inline-block {
  display: inline-block;
}

结果：

横向填充有效，但垂直没有。

Chrome调试程序显示填充文件已存在，但显示为父文件。

显然这不是一个很大的问题，如果我需要填充，我可以将子项更改为内联块，所以我想知道为什么这种情况发生。

Answer 1

我发现这篇文章对于了解正在发生的事情非常有帮助：https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

  

应用于元素的任何垂直填充，边框或边距都不会推开元素上方或下方的元素。

基本上，正如您从上图所示，添加了填充，它只是不会改变元素的垂直位置。

Answer 2

您要将填充添加到span元素，这是一个内联元素，其中垂直填充不会移动元素 - 其基线（因此文本）保持原样，因为内联span元素的属性。

因此，垂直填充只能与第二个父元素中的内联块设置一起使用 - 或者在第三个父元素中将其添加到div元素。