块不垂直扩展以进行内联填充答案

【问题标题】：Block not expanding vertically for inline padding块不垂直扩展以进行内联填充
【发布时间】：2016-01-10 10:46:59
【问题描述】：

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

或者看代码：

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

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

【问题讨论】：

maxdesign.com.au/articles/inline 可能会有所帮助。
block、inline-block 和 inline 不是有效的 html 元素。尝试使用有效的标记，看看问题是否仍然存在。
@sean you can have custom elements in HTML。尽管使用他的元素，inline-block 是唯一有效的元素，因为它的名称中有一个 -。一个类会更好，但它不应该影响渲染。
@JacobGray 如您的链接中所述，自定义元素必须通过 javascript 注册，这在上面的示例中没有发生。如果自定义元素未注册，则为无效标记。
自定义元素不是问题，正如@JacobGray 所说。我只有自定义元素来进一步展示效果，但我会切换到类以避免进一步混淆。

标签： css

【解决方案1】：

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

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

基本上，从上图可以看出，添加了内边距，只是不会改变元素的垂直位置。

【讨论】：

【解决方案2】：

您正在将内边距添加到 span 元素，这是一个内联元素，其中垂直内边距不会移动元素 - 由于内联属性，它的基线（以及因此文本）保持原位跨度元素。

因此，垂直填充只能与您的第二个父元素中的 inline-block 设置结合使用 - 或在您将其添加到 div 元素的第三个父元素中。

【讨论】：

可以添加文档链接吗？
但侧边距有效，如您在示例中所见。此外，如果您使用一些调试工具，它会显示父级的填充溢出；又名填充确实有效，有点。