内联元素的奇怪填充行为（考虑底部填充但不考虑顶部填充）

Question

虽然我知道内联元素是如何工作的。可以在这里找到一个很好的解释它的答案：CSS display: inline vs inline-block.

关于行内元素的说明：

respect left & right margins and padding, but not top & bottom

内联元素仅支持左右内边距，忽略顶部和底部的任何内边距。但是做了一些测试我发现了一个非常奇怪的行为。当给内联元素一个内边距时，它会将其应用于元素的左侧和右侧，但也会应用于底部但不会应用于顶部。

对这种行为有任何解释吗？

<html>
    <head>
        <style>
            * {
                box-sizing: border-box;
                padding:0;
                margin:0;
            }
            .parent{
                display:inline;
                background-color: red;
                padding: 10rem;
                color:white;
            }
        </style>
    </head>
    <body>
        <div class="parent">Whatever</div>
    </body>
</html>

Answer 1

使用浏览器工具检查该元素，您会发现还有一个 padding-top 的 10em，这在您的代码段中不可见。

原因：虽然内联元素有填充，但它不会影响它上下的距离——线（即文本的基线）位于在没有填充的情况下（或更好：是）相同的垂直位置。这里的填充只是创建一个溢出区域，你只能看到是否定义了背景。

查看我的代码片段，我在其中添加了一个带有 12em padding-top 的包装器和内联 div 前后的一些文本，以及包装器 div 前后的一些文本，这表明会发生什么。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrap1 {
  padding-top: 12em;
  background: green;
  /* display: block; is the default here */
}

.parent {
  display: inline;
  background-color: red;
  padding: 10rem;
  color: white;
}

.y {
  background: rgba(255, 255, 0, 0.4);
  border-radius: 50%;
  padding: 0.6em 0.15em 0.6em 0.1em;
}

<body>
  <div>This is in a separate div which preceds the inline div and its wrapper.</div>
  <div class="wrap1">
    this is on the same the line
    <div class="parent">Whatever</div> yes it is
  </div>
  <div>And this is in a separate div following the inline div and its wrapper.</div>
  <p>And here is another line with one (inline) <span class="y">word</span> that has a padding in a way that <em>might</em> be considered useful.</p>
</body>

内联元素的奇怪填充行为（考虑底部填充但不考虑顶部填充）

Weird padding behaviour for inline element (bottom padding is respected but top padding doesn't)

html

css

padding