Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
187 views
in Technique[技术] by (71.8m points)

css - Padding for Inline Elements

I am reading a book about CSS basics. It is claimed in the book that an inline element has complete padding properties but no margin-top/bottom properties, only margin-left/right properties.

My first question is, where can I find this as an official statement? I found here that if margin-top/bottom is set to auto then it is set to 0. But isn't that different from saying margin-top/bottom does not apply to inline-elements?

My second question is, does an inline element really got complete padding properties? I tried the following example:

enter image description here

<!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>
Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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?

You won't, because it isn't quite true. In the box model it says that for margin-top and margin-bottom:

These properties have no effect on non-replaced inline elements.

But "no effect" does not mean that the properties don't exist. Specifically, they do exist for the purposes of inheritance. Consider this example:

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...