css - block 不垂直扩展以进行内联填充

Question

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

参见 fiddle :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 调试器显示填充存在，但从父级流出。

显然这不是什么大问题，如果我需要填充，我可以将 child 更改为内联 block ，所以我想知道为什么会发生这种情况。

Answer 1

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

Any vertical padding, border, or margin applied to an element will not push away elements above or below it.

基本上，如上图所示，添加了内边距，只是不会改变元素的垂直位置。