All geek questions in one place

Gasket for inline elements

I am reading a CSS basics book. The book claims that the inline element has full padding properties, but not margin-top / bottom properties, only margin-left / right properties .

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

My second question is: does the inline element really have full 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>

, , - padding-top padding-bottom . ? - W3?

+4
3

, , margin-top/button, margin-left/right .

: ?

, . box model , margin-top margin-bottom:

.

"no effect" , . , . :

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>
Hide result

, b "two" inline, non-replace span, b- , . , margin-top bottom .

+6

-

margin padding strong, display:inline-block to strong style

<!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>
Hide result
0

: ? , margin-top/bottom "auto", '0'. , "margin-top/botton" ?

8.1 (http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin) " . 0 (), ."

10.6.1 " height" , "line-height". , .

: ? :

For the same reason as above. "the window height is set by the" line-height "property. The height of this strong element is set line-height, since it does not have a height for reference as a block or element of an inline block. I'm sure that if you gave it the properties of an inline block, it would be, since the block had a height in the model.

0
source

Source: https://habr.com/ru/post/1615137/

More articles:


All Articles