内联元素的填充
Padding for Inline Elements
我正在读一本关于 CSS 基础知识的书。书中声称内联元素具有完整的padding属性,但没有margin-top/bottom属性,只有margin-left/right属性.
我的第一个问题是,在哪里可以找到这个官方声明?我发现 here 如果 margin-top/bottom 设置为 auto
则设置为 0
。但这与说 margin-top/bottom 不适用于内联元素没有区别吗?
我的第二个问题是,内联元素真的有完整的填充属性吗?我尝试了以下示例:
<!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 标准中是否提到了这一点?
but for some reason it has no effect on the surrounding text
尝试在 strong
元素处用 margin
替换 padding
,将 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>
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'?
在 8.1 盒子模型规范中 (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."
在您链接的页面中 10.6.1 "The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property." 因此,由于高度不适用,因此边距与边框边缘相同。
My second question is, does an inline element really got complete
padding properties? I tried the following example:
同上。 "the height of the box is given by the 'line-height' property"。该强元素的高度由 line-height
设置,因为它没有像块或内联块元素那样可以参考的高度。我很确定如果你给它 inline-block 属性它会作为一个块在模型中有高度。
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?
你不会,因为这不是真的。在 box model 它说对于 margin-top 和 margin-bottom:
These properties have no effect on non-replaced inline elements.
但是"no effect"并不意味着属性不存在。具体来说,它们的存在确实是为了继承。考虑这个例子:
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>
我们可以看到带有class "two"的b元素继承了inline, non-replaced span元素的margin top和bottom属性,并且由于那个b元素是inline-block, margin-top 和 bottom 确实会导致布局差异。如果跨度上不存在 margin-top 和 bottom 属性,那将是不可能的。
我正在读一本关于 CSS 基础知识的书。书中声称内联元素具有完整的padding属性,但没有margin-top/bottom属性,只有margin-left/right属性.
我的第一个问题是,在哪里可以找到这个官方声明?我发现 here 如果 margin-top/bottom 设置为 auto
则设置为 0
。但这与说 margin-top/bottom 不适用于内联元素没有区别吗?
我的第二个问题是,内联元素真的有完整的填充属性吗?我尝试了以下示例:
<!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 标准中是否提到了这一点?
but for some reason it has no effect on the surrounding text
尝试在 strong
元素处用 margin
替换 padding
,将 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>
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'?
在 8.1 盒子模型规范中 (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."
在您链接的页面中 10.6.1 "The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property." 因此,由于高度不适用,因此边距与边框边缘相同。
My second question is, does an inline element really got complete padding properties? I tried the following example:
同上。 "the height of the box is given by the 'line-height' property"。该强元素的高度由 line-height
设置,因为它没有像块或内联块元素那样可以参考的高度。我很确定如果你给它 inline-block 属性它会作为一个块在模型中有高度。
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?
你不会,因为这不是真的。在 box model 它说对于 margin-top 和 margin-bottom:
These properties have no effect on non-replaced inline elements.
但是"no effect"并不意味着属性不存在。具体来说,它们的存在确实是为了继承。考虑这个例子:
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>
我们可以看到带有class "two"的b元素继承了inline, non-replaced span元素的margin top和bottom属性,并且由于那个b元素是inline-block, margin-top 和 bottom 确实会导致布局差异。如果跨度上不存在 margin-top 和 bottom 属性,那将是不可能的。