CSS 中的内联元素的填充实际上是如何工作的？

内联元素的填充：探索

内联元素的填充概念经常会导致混乱，特别是在它们与边距的交互方面特性。在本文中，我们将深入研究内联元素填充的特殊性并解决常见的误解。

内联元素填充：一个误解

虽然某些来源可能声称内联元素具有完整的填充属性，但这并不完全准确。虽然内联元素确实可以有填充，但它们缺乏应用垂直（顶部和底部）边距的能力。 CSS 规范明确指出这些属性对非替换内联元素“没有影响”。

继承和边距的无影响

但是，“没有效应”并不意味着这些属性不存在。当直接应用于内联元素时，它们会被忽略。尽管如此，它们确实在继承中发挥着作用。如以下示例所示，当用作子元素时，可以继承边距并将其应用于块元素：

p { border: 1px solid red; }
i { vertical-align: top; }
span { margin-top: 20px; margin-bottom: 20px; }
b { display: inline-block; }
.two { margin: inherit; }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

垂直填充的奥秘

另一个常见的误解是内联元素不能接受垂直填充。虽然 padding-top 和 padding-bottom 确实对文本内容似乎无效，但它们确实会影响周围的元素。在您的示例中，“hello”文本周围的填充不可见，因为它上下推动文本，但文本本身仍保留在原始行内。

以上是CSS 中的内联元素的填充实际上是如何工作的？的详细内容。更多信息请关注PHP中文网其他相关文章！