我正在读一本关于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标准中的任何地方都提到了这一点吗？
3 回答
呼如林
TA贡献1798条经验 获得超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猫
TA贡献1909条经验 获得超7个赞
但由于某种原因，它对周围的文字没有影响
尝试替换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>
- 3 回答
- 0 关注
- 362 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消