2

W3C's CSS2.1 specification, chapter 8.6 The box model for inline elements in bidirectional context, states:

For each line box, UAs must take the inline boxes generated for each element and render the margins, borders and padding in visual order (not logical order).

When the element's 'direction' property is 'ltr', the left-most generated box of the first line box in which the element appears has the left margin, left border and left padding, and the right-most generated box of the last line box in which the element appears has the right padding, right border and right margin.

Questions

  • It says "left-most generated box", which indicates that the inline-level element creates more than one inline-level box. Is that because at each line break it creates a new anonymous inline-level box?
  • Why does the padding/border of inline boxes behave as below? Insight into why it shows up the way it does, with basis in the CSS specification, would be greatly appreciated.

.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}
<span class="test">test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2</span>
Magnus
  • 6,791
  • 8
  • 53
  • 84

2 Answers2

2

For the second question you may refer to this part of the specification:

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}

div {
 border:1px solid red;
 margin:50px 0;
}
<div>
<span class="test">test2test2test2test2test2test2test2 test</span>
</div>

<div>
<span class="test">test2test2test2test2test2test2test2 test st2test2test2test2 test st2test2test2test2 test st2test2test2test2 test</span>
</div>



<div>
<span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2</span>
</div>

<div>
<span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2 test2test2test2test2test2test2test2 test2test2</span>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for the answer as always, Temani. I just realized that how my span in the OP is viewed by other users, depends on their screen width. On my relatively narrow laptop screen, the tests fall over two lines, creating several blue borders in a way I don't fully understand yet. I was trying to figure out what was going on there with all the lines. Heading to bed now, but will spend some time tomorrow morning figuring out how to apply your answer to my question. – Magnus May 09 '18 at 23:38
  • @Magnus i edited to show more line, this is simply because all the border are overlapping ;) try to increase line-height to see the effect – Temani Afif May 09 '18 at 23:40
2

To answer the first question:

It says "left-most generated box", which indicates that the inline-level element creates more than one inline-level box. Is that because at each line break it creates a new anonymous inline-level box?

Yes, but that's only one reason. An inline-level element can create zero, one or many inline-level boxes. So an inline element with no content or horizontal padding, border, or margin will create zero inline-level boxes. A different way in which an element can create multiple inline-level boxes is if the element contains child elements.

So if we have <span>foo <b>bar</b> baz</span>, then even if that all sits on one line, the span will create one inline-level box for foo, which will get the left margin, left border and left padding, and a separate inline-level box for baz, which will get the right margin, right border and right padding.

The b element creates the inline-level box for bar, which may have its own margins, borders, and paddings.

See Temani's answer for your second question.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Thank you, Alohci. I was thinking along the same lines, but then discarded the thought because is that not just the same as saying that there is no inheritance of margin, border and padding? That is how they work at the block-level as well though, so it seems odd for the spec to explicitly state that for inline-level elements the properties only apply to the element they are assigned to (as opposed to being inherited). – Magnus May 10 '18 at 07:01
  • No, what it's saying is how the margins, padding and border are allocated to the inline-level boxes. i.e., the element's first one gets the left value, the element's last one the right values, and any others in between get neither. – Alohci May 10 '18 at 07:36
  • If there was inheritance, would not inherit the properties of its parent – Magnus May 10 '18 at 07:39
  • Yes, it would. But that's not what the quoted paragraph is about. – Alohci May 10 '18 at 07:40
  • Follow-up: In your example you show that several inline-level boxes are created by nesting inline-level elements. To my understanding, the only way child boxes can receive the properties from their parents is through inheritance. So, if the paragraph is not about inheritance, yet it mentions that only parent boxes receive the properties, then it implies that there must be another cause (besides inheritance), for why child boxes would receive the properties. In other words, if this is not pointing at inheritance, why mention "first element" at all (besides the anonymous boxes I mentioned)? – Magnus May 10 '18 at 09:07
  • I don't see the term "first element" anywhere. Where is it used? – Alohci May 10 '18 at 09:32
  • Sorry, that was a typo, I meant "left-most generated box". I think I got it though. What it means (except for anonymous boxes across line boxes) is that it would not apply to the middle box here: `foobarmiddlebazend`. I am not sure I see how it is referring to boxes created by the b elements. The reason they don't get the outer span's properties has nothing to do with the paragraph and all to do with inheritance I think. – Magnus May 10 '18 at 09:53