text-height
Summary
This property helps determine an inline box’s block-progression dimension, derived from the text-height and font-size properties for non-replaced elements, the height or the width for replaced elements, and the stacked block-progression dimension for inline-block elements. The block-progression dimension determines the position of the padding, border and margin for the element.
Overview table
- Initial value
auto- Applies to
- Inline elements and parents of elements with display:ruby-text.
- Inherited
- Yes
- Media
- visual
- Computed value
- As specified, except for initial and inherit
- Animatable
- No
- Percentages
- N/A
Syntax
text-height: <number>text-height: autotext-height: font-sizetext-height: max-sizetext-height: text-size
Values
- auto
- The block-progression dimension is based either on the em square determined by the computed element font-size property value, or the cell-height (ascender + descender) related to the computed element font-size as chosen by the user agent.
- font-size
- The block-progression dimension is based on the em square as determined by the computed element font-size.
- text-size
- The block-progression dimension is based on the cell-height (ascender + descender) related to the computed element font-size.
- max-size
- The block-progression dimension is based on the maximum extents toward the before-edge and after-edge of the box (obtained by considering all child elements located on the same line), ruby annotations (elements with “display:ruby-text”), and baseline shifted elements.
- <number>
- The block progression dimension is based on number times the em square as determined by the computed font-size.
Examples
/* auto */
.inlinebox { text-height: auto; }
/* font-size */
.inlinebox { text-height: font-size; }
/* number */
.inlinebox { text-height: 3; }
Related specifications
- CSS Line Layout Module
- W3C Editor’s Draft