Menu
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:
<!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>Now, this shows that padding actually works somehow, but for some reason, padding-top and padding-bottom has no effect on the surrounding text. Why is that? Is this mentioned anywhere in the W3 standards?
360
When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element.
The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
padding ignores inline elements As you can see, this adds spaces only to the left and right sides of the element, but not the top and bottom.
The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
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>We can see that the b element with class "two" inherits the margin top and bottom properties of the inline, non-replaced span element, and since that b element is inline-block, the margin-top and bottom do cause a layout difference. That would be impossible if the margin-top and bottom properties did not exist on the span.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
