Question

虽然我知道内联元素是如何工作的。可以在此处找到解释它的不错答案：CSS display: inline vs inline-block。

关于内联元素的说明：

<块引用>

尊重左右边距和填充，但不尊重顶部和底部

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

对这种行为有什么解释吗？

<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>

内联元素的奇怪填充行为（尊重底部填充，但不尊重顶部填充）

1 个答案: