0

Excerpts from the CSS specification (emphasized by me):

9.4.2 Inline formatting contexts

A line box is always tall enough for all of the boxes it contains.. When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes.. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap. (ref)

'line-height':

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. (ref)

Keeping it in mind, that line boxes don't allow for bleeding their content away and at once don't overlap with each other, how is it still possible we can get lines of text vertically overlapping? This result may become achievable when a container's line-height is set in ems whereas an inline descendant's font-size computed value is of a comparable number (an example is at the end of this Mozilla doc).

Following the spec I would rather expect to see vertically cropped text in this case, but not overlapped.

Ilya Loskutov
  • 1,967
  • 2
  • 20
  • 34
  • compare it with height:auto .. if you don't set any height, the browser will always try to fit the content without overlap or cut. If you specify a height, it's another story. Same logic here. No overlapping occurs by default BUT you can explicitly set the height of line boxes to create an overlap – Temani Afif Mar 10 '22 at 10:25
  • From that specificaiton: *On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.* --> focus on the *.. that is used in the calculation of the line box height* – Temani Afif Mar 10 '22 at 10:28
  • @TemaniAfif I can see some logic here but I'm a bit confused by such strict words as ***always** tall enough* and ***never** overlap*. BTW: if we see overlapping text the question arises: is it due to bleeding content away from line boxes or overlapping line boxes with each other? Sometimes it can be not a playful one when, for example, a `span` has a border. – Ilya Loskutov Mar 10 '22 at 10:46
  • the **always** still stand here because it says *.. for all the boxes it contains*. Note the use of boxes. Now the question is: what is the height of your boxes? the content inside them may overflow because you define their height. Line boxes never overlap but the boxes inside can overflow to overlap with the ones of another lines box. It's not trivial to understand all the boxes, line boxes stuff (I myself struggle from time to time) – Temani Afif Mar 10 '22 at 10:50
  • @TemaniAfif for that matter, can we say that vertical borders and paddings applied to an inline element is a part of its generated box, so they must stay within the line box and not overflow? (can't see the place at the spec on it) – Ilya Loskutov Mar 10 '22 at 11:13
  • you read about it here: https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced – Temani Afif Mar 10 '22 at 12:06

0 Answers0