Visual formatting model details

For replaced elements, inline-block elements, and inline-table
elements, this is the height of their margin box; for inline boxes,
this is their 'line-height'.

(See
"Calculating heights and
margins"
and the
height of inline
boxes
in
"Leading and half-leading"
.)
The inline-level boxes are aligned vertically according
to their
'vertical-align'
property.

In case they are aligned 'top' or 'bottom', they must be aligned so as
to minimize the line box height. If such boxes are tall enough, there
are multiple solutions and CSS 2.1 does not define the position
of the line box's baseline (i.e., the position of the
strut, see below
).
The line box height is the distance between the uppermost
box top and the lowermost box bottom. (This includes the
strut,
as explained under
'line-height'
below.)
Empty inline elements generate empty inline boxes, but these boxes
still have margins, padding, borders and a line height, and thus
influence these calculations just like elements with content.
10.8.1
Leading and half-leading
CSS assumes that every font has font metrics that specify a
characteristic height above the baseline and a depth below it. In this
section we use
to mean that height (for a given font at a
given size) and
the depth. We also define
AD
, the distance from the top to the
bottom. (See the note below for
how to find
and
for TrueType and OpenType fonts.
Note that these are metrics of the font as a whole and need not
correspond to the ascender and descender of any individual glyph.
User agent must align the glyphs in a non-replaced inline box to
each other by their relevant baselines. Then, for
each glyph, determine the
and
. Note that
glyphs in a single element may come from different fonts and thus need
not all have the same
and
. If the inline box
contains no glyphs at all, it is considered to contain a
strut
(an invisible glyph of zero width) with the
and
of the element's first available font.
Still for each glyph, determine the leading
to add,
where
'line-height'
AD
. Half
the leading is added above
and the other half below
, giving the glyph and its leading a total height above
the baseline of
A'
/2 and a
total depth of
D'
/2.
Note.
may be negative.
The height of the inline box encloses all
glyphs and their half-leading on each side and is thus exactly
'line-height'. Boxes of
child elements do not influence this height.
Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
around inline boxes. This means that if the height specified by
'line-height'
is less than the
content height of contained boxes, backgrounds and colors of padding
and borders may "bleed" into adjoining line boxes. User agents should
render the boxes in document order. This will cause the borders on
subsequent lines to paint over the borders and text of previous lines.
Note.
CSS 2.1 does not define
what the content area of an inline box is (see
10.6.1
above) and thus different UAs
may draw the backgrounds and borders in different places.
Note.
It is
recommended that implementations that use OpenType or TrueType fonts
use the metrics "sTypoAscender" and "sTypoDescender" from the font's
OS/2 table for A and D (after scaling to the current element's font
size). In the absence of these metrics, the "Ascent" and "Descent"
metrics from the HHEA table should be used.
'line-height'
Value:
normal |



inherit
Initial:
normal
Applies to:
all elements
Inherited:
yes
Percentages:
refer to the font size of the element itself
Media:
visual
Computed value:
for

and

the absolute value; otherwise as specified
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. The minimum height consists of a minimum height above
the baseline and a minimum depth below it, exactly as if each
line box starts with a
zero-width inline box with the
element's font and line height properties.
We call that imaginary
box a "strut." (The name is inspired by TeX.).
The height and depth of the font above and below the baseline are
assumed to be metrics that are contained in the font. (For more
details, see CSS level 3.)
On a non-replaced
inline
element, 'line-height'
specifies the height that is used in the calculation of the line box
height.
Values for this property have the following meanings:
normal
Tells user agents to set the used
value to a "reasonable" value based on the font of the element. The
value has the same meaning as

. We recommend a
used value for 'normal' between 1.0 to 1.2. The
computed value
is 'normal'.

The specified length is used in the calculation of the line box
height. Negative values are illegal.

The used value of the property is this number multiplied by the
element's font size. Negative values are illegal. The
computed value
is the same as
the specified value.

The
computed value
of the
property is this percentage multiplied by the element's
computed font size. Negative values are illegal.
Example(s):
The three rules in the example below have the same resultant line height:
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
When an element contains text that is rendered
in more than one font, user agents may determine the 'normal'
'line-height'
value according to
the largest font size.
Note.
When there is only one value of
'line-height'
for all inline
boxes in a block container box and they are all in the same font (and
there are no replaced elements, inline-block
elements, etc.), the above will ensure that
baselines of successive lines are exactly
'line-height'
apart. This is
important when columns of text in different fonts have to be aligned,
for example in a table.
'vertical-align'
Value:
baseline | sub | super | top | text-top | middle |
bottom | text-bottom |


inherit
Initial:
baseline
Applies to:
inline-level and 'table-cell' elements
Inherited:
no
Percentages:
refer to the 'line-height' of the element itself
Media:
visual
Computed value:
for

and

the absolute length, otherwise as specified
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
Note.
Values of this property have
different meanings in the context of tables.
Please consult the section on
table height algorithms
for details.
The following values only have meaning with respect to a parent
inline element, or to the
strut
of a parent
block container element.
In the following definitions, for inline non-replaced elements, the
box used for alignment is the box whose height is the 'line-height'
(containing the box's glyphs and the half-leading on each side, see
above
). For all other elements, the box
used for alignment is the margin box.
baseline
Align the baseline of the box with the baseline of
the parent box. If the box does not have a baseline, align the
bottom margin edge with the parent's baseline.
middle
Align the vertical midpoint of the box with the baseline
of the parent box plus half the x-height of the parent.
sub
Lower the baseline of the box to the proper position for
subscripts of the parent's box. (This value has no effect on the
font size of the element's text.)
super
Raise the baseline of the box to the proper position for
superscripts of the parent's box. (This value has no effect on the
font size of the element's text.)
text-top
Align the top of the box with the top of the parent's content
area (see
10.6.1
).
text-bottom
Align the bottom of the box with the bottom of the parent's
content area (see
10.6.1
).

Raise (positive value) or lower (negative value) the box
by this distance (a percentage of the
'line-height'
value).
The value '0%' means the same as 'baseline'.

Raise (positive value) or lower (negative value) the box
by this distance.
The value '0cm' means the same as 'baseline'.
The following values align the element relative to the line box.
Since the element may have children aligned relative to it (which in
turn may have descendants aligned relative to them), these values use
the bounds of the aligned subtree. The
aligned subtree
of
an inline element contains that element and the aligned subtrees of
all children inline elements whose computed 'vertical-align' value is
not 'top' or 'bottom'. The top of the aligned subtree is the highest
of the tops of the boxes in the subtree, and the bottom is analogous.
top
Align the top of the aligned subtree with the top of the line box.
bottom
Align the bottom of the aligned subtree with the bottom of the
line box.
The baseline of an 'inline-table' is the baseline of the first row
of the table.
The baseline of an 'inline-block' is the baseline of its last line
box in the normal flow, unless it has either no in-flow line boxes or
if its 'overflow' property has a computed value other than 'visible',
in which case the baseline is the bottom margin edge.
previous
next
contents
properties
index