14

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>

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?

3
  • 1
    You ask about margin but give an example of padding? Your question you state "inline element has complete padding properties" and your example shows that, so what is your question.
    – Leeish
    Nov 9, 2015 at 23:20
  • @Leeish and also the example shows that padding only works 50%. The background color is applied to padding-top, but padding-top has no influence at the surrounding text. Therefore I claim that padding is not working as expected.
    – Adam
    Nov 9, 2015 at 23:29
  • 1
    See my answer. It is adding padding to the strong element. But inline elements don't have a height as block and inline-block elements do. They don't affect the height of their parents like a block element as the height of an inline element is it's line-height as per 10.6.1 which you linked.
    – Leeish
    Nov 9, 2015 at 23:36

3 Answers 3

11

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.

0

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/botton does not apply to inline-elements'?

In 8.1 Box Model Spec (http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin) "The margin edge surrounds the box margin. If the margin has 0 width(height), the margin edge is the same as the border edge."

In the page you linked 10.6.1 "The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property." So since height doesn't apply, then the margin-edge is the same as the border edge.

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

Same reason as above. "the height of the box is given by the 'line-height' property". The height of that strong element is set by the line-height as it has no height to reference as a block or inline-block element would. I'm pretty sure if you gave it inline-block properties it would as a block has height in the model.

2
  • Thank you. Still, I am new to the WC3 documentation and thats probably why I do not understand your conclusions. Here is my first problem: I see that it is said in 10.6.1 If margin-top is set to 'auto', then it is set to 0. I have the feeling that you say Whatever margin-top is assigned to, it will be set to 0 but I do not find this statement.
    – Adam
    Nov 9, 2015 at 23:43
  • Right after "their computed value is 0" it says "The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property." So follow me, if the 'height' property doesn't apply then per the box model in 8.1 which I linked then the height of the box is only set by the line-height at least that's the way I understand it.
    – Leeish
    Nov 9, 2015 at 23:52
-1

but for some reason it has no effect on the surrounding text

Try substituting margin for padding at strong element, adding 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>

2
  • Do you want to prove that the inline element has no margin-top/bottom? Because then I don't see your point, since background-color only applies to padding, not to margin.
    – Adam
    Nov 9, 2015 at 23:25
  • @Adam Post intends to apply margin to strong element where surrounding text appear affected by margin property , by including display:inline-block to strong element . If inspect strong element without inline-block applied , margin-top , margin-bottom is still applied to element - with display set to inline . Though element does not have inline-block or block display applied , which would visually affect surrounding text Nov 9, 2015 at 23:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.