A CSS inline box is the box generated by an inline CSS non-replaced element, such as a text element styled with display:inline. It participates in a CSS inline formatting context. When line breaking splits its content, fragments can occur on several CSS line boxes.[ref]
For vertical line layout, its line-height and the CSS leading calculation determine its allocated extent. A child can contribute a taller box to the same CSS line box without changing the parent's own allocated height. For example, take a parent with line height 14 CSS pixels and baseline extents 10 above and 4 below. A child with line height 24 and extents 17 above and 7 below enlarges the enclosing line to 24 CSS pixels, assuming the CSS strut adds no greater extent. The parent's 14-CSS pixel allocation and the final 24-CSS pixel line describe different boxes.[ref]
The height property does not supply a preferred height for a non-replaced CSS inline box; height:40px on such a text element therefore does not replace this line-layout calculation. The properties determining a CSS preferred size have different applicability from line-height.[ref]

Ancestors (7)

  1. CSS line box
  2. Line height
  3. Text baseline
  4. Glyph positioning
  5. Text shaping
  6. Typography
  7. Home

Incoming links (5)

View article source

Discussion (0) New discussion

There are no discussions about this article yet.

Articles by others on the same topic (0)

There are currently no matching articles.
See all articles in the same topic Create my own version