内联元素的填充
我正在读一本关于CSS基础知识的书.书中声称内联元素具有完整的填充属性,但没有margin-top/bottom属性,只有margin-left/right属性.
我的第一个问题是,我在哪里可以找到这个官方声明？我在这里发现如果margin-top/bottom设置为autothen则设置为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标准中提到的吗？
书中声称内联元素具有完整的填充属性,但没有margin-top/button属性,只有margin-left/right属性.
我的第一个问题是,我在哪里可以找到这个官方声明？
你不会,因为它不是真的.在盒子模型中,它表示对于margin-top和margin-bottom:
这些属性对未替换的内联元素没有影响.
但"没有效果"并不意味着这些属性不存在.具体而言,它们确实存在以用于继承.考虑这个例子:
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元素继承了内联的,未替换的span元素的margin top和bottom属性,并且因为b元素是inline-block,所以margin-top和bottom确实导致布局差异.如果跨度上不存在margin-top和bottom属性,那将是不可能的.