我正在读一本关于CSS基础知识的书.书中声称内联元素具有完整的填充属性,但没有margin-top / button属性,只有margin-left / right属性.
我的第一个问题是,我在哪里可以找到这个官方声明？我发现here如果margin-top / bottom设置为’auto’则将其设置为’0′.但与说’margin-top / botton不适用于内联元素’没有什么不同？
我的第二个问题是,内联元素是否真的具有完整的填充属性？我尝试了以下示例：
<!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>
现在这显示填充实际上以某种方式工作,但由于某种原因,填充顶部和填充底部对周围文本没有影响.这是为什么？这是在W3标准中提到的吗？
解决方法
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中,它表示保证金最高和保证金最低价：
These properties have no effect on non-replaced inline elements.
但“没有效果”并不意味着这些属性不存在.具体而言,它们确实存在以用于继承.考虑这个例子：
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属性,那将是不可能的.
