CSS 内联元素的填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33620139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Padding for Inline Elements
提问by Adam
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/bottomproperties, only margin-left/rightproperties.
我正在阅读一本关于 CSS 基础知识的书。书中声称内联元素具有完整的填充属性，但没有边距顶部/底部属性，只有边距左/右属性。
My first question is, where can I find this as an official statement? I found herethat if margin-top/bottomis set to autothen it is set to 0. But isn't that different from saying margin-top/bottomdoes not apply to inline-elements?
我的第一个问题是，我在哪里可以找到官方声明？我在这里发现，如果margin-top/bottom设置为，auto那么它设置为0. 但这与说margin-top/bottom不适用于内联元素有什么不同吗？
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>
Now, this shows that padding actually works somehow, but for some reason, padding-topand padding-bottomhas no effect on the surrounding text. Why is that? Is this mentioned anywhere in the W3 standards?
现在，这表明填充实际上以某种方式起作用，但出于某种原因，padding-top并且padding-bottom对周围的文本没有影响。这是为什么？这在 W3 标准中的任何地方都提到过吗？
回答by Alohci
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 modelit says that for margin-top and margin-bottom:
你不会，因为它不完全正确。在盒子模型中，它表示对于 margin-top 和 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>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.
我们可以看到类为“two”的 b 元素继承了 inline、非替换 span 元素的 margin top 和 bottom 属性，并且由于那个 b 元素是 inline-block，所以 margin-top 和 bottom 确实会导致布局差异. 如果跨度上不存在 margin-top 和 bottom 属性，那将是不可能的。
回答by Leeish
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/botton does not apply to inline-elements'?
我的第一个问题是，我在哪里可以找到官方声明？我在这里发现，如果 margin-top/bottom 设置为“自动”，那么它被设置为“0”。但这与说“margin-top/botton 不适用于内联元素”有什么不同吗？
In 8.1 Box Model Spec (http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin) "The margin edge surrounds the box margin. If the margin has 0 width(height), the margin edge is the same as the border edge."
在 8.1 Box Model Spec ( http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin)“边距边缘围绕框边距。如果边距的宽度（高度）为 0，则边距边缘与边框边缘相同。”
In the page you linked 10.6.1 "The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property." So since height doesn't apply, then the margin-edge is the same as the border edge.
在您链接的页面中 10.6.1 “'height' 属性不适用，但框的高度由 'line-height' 属性给出。” 因此，由于高度不适用，所以边距边缘与边框边缘相同。
My second question is, does an inline element really got complete padding properties? I tried the following example:
我的第二个问题是，内联元素真的有完整的填充属性吗？我尝试了以下示例：
Same reason as above. "the height of the box is given by the 'line-height' property". The height of that strong element is set by the line-heightas it has no height to reference as a block or inline-block element would. I'm pretty sure if you gave it inline-block properties it would as a block has height in the model.
原因和上面一样。“框的高度由 'line-height' 属性给出”。该强元素的高度由 设置，line-height因为它没有像块或内联块元素那样引用的高度。我很确定如果你给它 inline-block 属性，它会因为一个块在模型中具有高度。
回答by guest271314
but for some reason it has no effect on the surrounding text
但由于某种原因它对周围的文字没有影响
Try substituting marginfor paddingat strongelement, adding display:inline-blockto strongstyle
尝试替换margin为padding在strong元素，加入display:inline-block到strong风格
<!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="margin:20px;background-color:yellow;display:inline-block;">hello</strong>
test test test test</p>
</div>
</body>
</html>