内联元素的填充 [英] Padding for Inline Elements
问题描述
我正在读一本关于CSS基础知识的书.书中声称，内联元素具有完整的填充属性，但没有 margin-top/bottom 属性，只有 margin-left/right 属性.
I am reading a book about CSS basics. It is claimed in the book that an inline element has complete padding properties but no margin-top/bottom properties, only margin-left/right properties.
我的第一个问题是，在哪里可以找到它作为正式声明?我发现在此如果 margin-top/底部设置为auto，然后将其设置为0.但这与说 margin-top/bottom (不适用于顶部元素)没有什么不同吗?
My first question is, where can I find this as an official statement? I found here that if margin-top/bottom is set to auto then it is set to 0. But isn't that different from saying margin-top/bottom does not apply to inline-elements?
我的第二个问题是，内联元素真的具有完整的填充属性吗?我尝试了以下示例:
My second question is, does an inline element really got complete padding properties? I tried the following example:
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div style="margin: 20px; border: solid 20px;background: red;">
<p style="margin:0">
test test test test test test test test test test test test test test
test test test test test test test test test test
<strong style="padding:20px;background-color:yellow">hello</strong>
test test test test
</p>
</div>
</body>
</html>
现在，这表明填充实际上可以以某种方式起作用，但是由于某些原因，padding-top和padding-bottom对周围的文本没有影响.这是为什么? W3标准中的任何地方都提到了这一点吗?
Now, this shows that padding actually works somehow, but for some reason, padding-top and padding-bottom has no effect on the surrounding text. Why is that? Is this mentioned anywhere in the W3 standards?
推荐答案
书中声称内联元素具有完整的填充 属性，但没有margin-top/button属性，只有margin-left/right 属性.
It is claimed in the book that an inline element has complete padding properties but no margin-top/button properties, only margin-left/right properties.
我的第一个问题是，在哪里可以找到它作为正式声明?
My first question is, where can I find this as an official statement?
您不会，因为那不是真的.在框模型中，它表示边距顶部和边距-底部:
You won't, because it isn't quite true. In the box model it says that for margin-top and margin-bottom:
这些属性对未替换的内联元素没有影响.
These properties have no effect on non-replaced inline elements.
但是无作用"并不意味着该属性不存在.具体来说，它们确实是出于继承的目的而存在的.考虑以下示例:
But "no effect" does not mean that the properties don't exist. Specifically, they do exist for the purposes of inheritance. Consider this example:
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>
我们可以看到，具有"two"类的b元素继承了内联非替换范围元素的margin top和bottom属性，由于b元素是inline-block，margin-top和bottom确实会导致布局差异.如果span上不存在margin-top和bottom属性，那将是不可能的.
We can see that the b element with class "two" inherits the margin top and bottom properties of the inline, non-replaced span element, and since that b element is inline-block, the margin-top and bottom do cause a layout difference. That would be impossible if the margin-top and bottom properties did not exist on the span.
这篇关于内联元素的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
