内联元素的填充
我正在读一本关于CSS基础的书。该书声称内联元素具有完整的填充属性，但没有margin-top / bottom属性，只有margin-left / right属性。
我的第一个问题是，在哪里可以找到它作为正式声明？我在这里发现，如果margin-top / bottom设置为，auto则将其设置为0。但这与说上/下边距不适用于行内元素有什么不同吗？
我的第二个问题是，内联元素是否真的具有完整的填充属性？我尝试了以下示例：
<!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标准中的任何地方都提到了这一点吗？
吃鸡游戏浏览 363回答 3
3回答
-
呼如林
该书声称内联元素具有完整的填充属性，但没有margin-top / button属性，只有margin-left / right属性。我的第一个问题是，在哪里可以找到它作为正式声明？您不会，因为那不是真的。在框模型中，它表示对于上边距和下边距：这些属性对未替换的内联元素没有影响。但是，“无效”并不意味着该属性不存在。具体来说，它们确实是出于继承的目的而存在。考虑以下示例：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属性，那将是不可能的。 -
jeck猫
但由于某种原因，它对周围的文字没有影响尝试替换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>
随时随地看视频慕课网APP
Html/CSS