内联元素的填充

内联元素的填充

我正在读一本关于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属性，那将是不可能的。

0

0

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>

0

0

随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS: 为什么字体颜色在Eclipse上没有变化 2 回答