css – 内联元素的填充

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

css – 内联元素的填充

解决方法

相关推荐