| Term |
Meaning |
| Baseline |
The initial value of vertical-align property. Baseline
means that text of any size will have its baseline aligned
with the overall basline for the line. Images will have
their bottom edge rest on the baseline, since that's what
the value baseline is defined to mean for images (or any
other replaced element). |
| Border |
A property that allows an author to specify the width,
color, and style of the border area (between any
specified padding and margins) of an element's rendering
box.
The border property does not influence the line height
of a non-replaced element.
The border property does influence the line height of
a replaced element.
|
| Computed value |
The transformation of a relative value into an
absolute value. Values with relative units (em, ex, px)
must be made absolute by multiplying with the appropriate
font or pixel size, 'auto' values must be computed by the
formulas given with each property, certain keywords
('smaller', 'bolder', 'inherit') must be replaced
according to their definitions. In most cases, elements
inherit computed values.
The computed value of "percentage" for vertifcal-align
are calculated with respect to the value of line-height
for the element, and moved accordingly. Thus:
sup {font-size: 8px; line-height: 14px;
vertical-align: 50%;}
...will lead to any sup element being raised by 7px.
If an element doesn't have an explicit line-height value
set, then it will use whatever value it inherits from its
parent-- and remember that's a computed value! It will be
passed down as pixels, probably.
There is one exception to the
computed-value-inheritance rule: raw number values. You
can give an element styles like this:
p {line-height: 1.5;}
In that case alone, the number 1.5 will be passed down
to the descendants, and used as a multiplier for the
font-size value for each descendant. Thus:
p {font-size: 14px; line-height:
1.5;}
span {font-size: 10px;}
The computed value of line-height for the paragraph
will be 21px, and for the span it will be 15px.
|
| Content area |
An area generated by every element in a line. It is
determined by the font size of its elements. |
Content-area
in non-replaced element |
A box described by the font-size of each character in
the element, strung together. Margins, borders, or padding
do not influence line height. |
Content-area
in replaced element |
The intrinsic height of the element plus any margins,
borders, or padding. |
| em-box |
The box around a font character of a given 'size' as
designed by the designer. It is sometimes referred to as an
em-square. The theoretical square that glyphs are designed
upon. Its height is the intended distance between lines of
type in the same type size. It is the design grid on which
the glyph outlines are defined. |
| font-size |
The value used with the em-box to scale a font for
display. CSS defines the font size to be "the size of the
font when set solid." This means that the height of the
font is the distance from the highest point in the highest
glyph to the lowest point in the lowest glyph. |
| Glyph |
An image for a character in a particular font and
style. |
| half-leading |
The leading split in half and applied equally to the
top and bottom edges of the element's content-area. The
difference between font-size and line-height, applied
equally above and below the content-area for each
element. |
| Inline box |
The addition of (half-)leading to the content-area for
each element. |
Inline box height
for replaced elements |
The height of the inline box of an element will be
exactly equal to the intrinsic height of the element plus
any margins, borders, or padding.
The box properties (margin, padding, and border
properties) on inline replaced elements are handled just
like box properties on block-level elements. The content
height and width are determined by the height and width
properties (which may be auto), and the padding, border,
and margin are placed outside of the content. For inline
replaced elements, the only edge relevant to the inline
box model is the margin edge (the outside edge of the
margin).
|
Inline box height
non-replaced element |
The height of the inline box of a non-replaced element
will be exactly equal to the value for line-height.
The difference between the font-size and line-height
divided in half and applied to the top and bottom of each
element's content height.
or
Font-size - line-height = leading
Divide leading by 2 = half-leading
Add the value of the half-leading to the top and
bottom of the content area to get the inline box.
For the purposes of the box properties, the line height
is subtracted from the line height to determine the
height of an inline box. The vertical padding and border
are placed outside the font edge. If the inline element
is broken over lines, they occur on every line. However,
they have no effect on the layout of the inline elements.
(Since the vertical box properties have no effect on the
layout of the elements, the vertical margin properties
have no effect at all.)
|
| Leading |
The difference between the values of line-height and
font-size. It is the extra space between the lines of text
above and below the font's size. |
| line-box |
A line-box is the box which bounds the highest and
lowest points of the inline boxes which are part of the
line. It is the distance from the top of the highest
inline box in the line to the bottom of the lowest inline
box in the line. A line-box is as tall as the inline
boxes within a line. That is, the top of the tallest
inline box and the bottom of the lowest inline box define
the top and bottom of the line box. That determines the
separation between baselines.
It is always tall enough for all of the boxes it
contains. However, it may be taller than the tallest box
it contains (if, for example, boxes are aligned so that
baselines line up). When the height of a box B is less
than the height of the line box containing it, the
vertical alignment of B within the line box is determined
by the 'vertical-align' property.
Line-box height equals the value of line height.
|
| line-height |
The difference between the values of line-height and font-size for
a given element. The line-height property specifies the logical height
of an inline element. This is the height used in the vertical alignment
of inline elements and the construction of line boxes. It defines the
height of the inline box for a given element. It determines the amount
by which the height of each element's linebox is increased or decreased.
This property DETERMINES the amount by which the
height of each element's line box is increased or
decreased. Basically it is not a set measurement, but as
a calculation.
line-height defines the minimum distance between
baselines. So take this as an example:
p {line-height: 18px;}
In any paragraph that contains only text, with no
descendant elements of any kind, then the baselines of
its lines should all be 18 pixels apart. This is the
easiest case of calculating the height of each line
box.
However, as soon as you start throwing in elements
like images, or elements with different line-height
values, or elements that have been vertically offset
using vertical-align, then the picture gets crowded. Any
of those things can make a line box taller than its
default, and so push that baseline further away from the
adjacent baselines. But nothing can make any line box
smaller than 18 pixels tall-- at least the way CSS2 is
written. Even if a line is nothing but a one-pixel-tall
image, the line box will still be 18 pixels tall.
If the 'line-height' value is greater than the value
of the 'font-size' for the element, this difference
(called the "leading") is cut in half (called the
"half-leading") and distributed evenly on the top and
bottom of the inline box. In this manner, the content of
an inline element box is centered within the line-box
(assuming no 'vertical-align' property is also set to
change this behavior.) Negative values for this property
are not allowed. This property is also a component of the
'font' shorthand property.
Descendants that don't have their own value of
line-height, will inherited a computed value. If they do
have their own value, then it goes into effect and the
inherited value is thrown out.
As described in CSS2 the line-height property takes
four types of values (other than inherit):
- normal
Tells user agents to set the computed value to a
"reasonable" value based on the font size of the
element. The value has the same meaning as
<number>.
- <length>
The box height is set to this length. Negative values
are illegal.
- <Number>
The computed value of the property is this number
multiplied by the element's font size. Negative values
are illegal. However, the number, not the computed
value, is inherited.
- <Percentage>
The computed value of the property is this percentage
multiplied by the element's computed font size.
Negative values are illegal.
<Length> and <percentage> values have
computed values that are lengths, and therefore the
computed values inherit as lengths. Therefore, they are
dangerous on any element whose descendants have a
different font size. <Number> and normal values
have computed values that are scaling factors, and
therefore inherit as scaling factors that are multiplied
by the font-size when used in calculations. They are
therefore safe.
- If the computed value for the 'line-height'
property is less than the computed 'font-size' for an
inline element box, fonts may 'bleed' (overflow) the
element box.
- If this property is set for a block-level element
box that contains inline elements, the value specifies
the minimal height of each of the inline boxes.
- For inline element boxed, this property specifies
the height of the boxes generated by the element.
- For inline replaced elements the height of the
element box is given by the 'height' property instead
of the 'line-height' property.
- If an element box contains text in more than one
font-size, the 'line-height' property should be
determined using the largest font-size. This helps to
create consistent baselines between adjacent line
boxes.
|
| Margin |
A property that allows the author to specify how much
space will be inserted between other exterior elements
and the current element border.
Margins on non-replaced inline elements don't have any
effect on line height. This is described in CSS2:10.8.1,
which states:
Although margins, borders, and padding of non-replaced
elements DO NOT enter into inline box height calculation
(and thus the line box calculation), they are still
rendered around inline boxes. Margins are by their nature
invisible except in how they affect the placement of
other elements. Since they don't have an effect on line
height, they're effectively invisible for non-replaced
elements. The left and right margins of an inline element
should have a visible effect, by creating space to the
left of the first box in an inline element, and the right
of the last box.
The margin property does influence the line height of
a replaced element.
|
| Non-replaced element |
In general, those elements whose content is contained
in the document. |
| Padding |
A property that allows the author to specify how much
space will be inserted between the element border and the
element content. Negative values are not allowed.
Padding doesn't affect line height when set on
non-replaced elements (per CSS2:10.8.1) but if there's a
background set on the element, the padding can have a
visible presence... or not. Browsers are permitted to do
what they like here-- not apply any top or bottom
padding, let the background grow but overlap other lines
of text, let the background grow and slide it beneath
other text lines, or anything else. Ditto for borders.
Padding and borders will affect line layout on the sides
of the inline element, in much the same way that margins
do.
The padding property does influence the line height of
a replaced element.
|
| Replaced element |
Elements those whose content is outside of the
document. Examples of replaced elements are things like
images and form elements. |
| vertical-
align |
A property that affects the vertical positioning
inside a line box of the boxes generated by an
inline-level element. It applies only to inline elements,
although that includes replaced elements such as images
and form inputs. It is not inherited. Element content is
typically vertically centered on a rendered line (with
extra line-height amounts distributed equally on the top
and bottom.) This property allows inline content boxes to
be vertically aligned with respect to several different
criteria on a rendered line.
Values include:
- baseline - aligns the baseline of the box with the
baseline of the parent box. If the box doesn't have a
baseline, align the bottom of the box with the parent's
baseline. It is the initial value of vertical-align.
Baseline means that text of any size will have its
baseline aligned with the overall basline for the line.
Images will have their bottom edge rest on the
baseline, since that's what the value baseline is
defined to mean for images (or any other replaced
element).
- middle - aligns the vertical midpoint of the box
with the baseline of the parent box plus half the
x-height of the parent.
- sub - lowers 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 - raises 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 element's font.
- Text-bottom - aligns the bottom of the box with the
bottom of the parent element's font.
- <Percentage> - raises (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'.
- <Length> - raises (positive value) or lower
(negative value) the box by this distance. The value
'0cm' means the same as 'baseline'.
The remaining values refer to the line box in which
the generated box appears:
- top - aligns the top of the box with the top of the
line box.
- Bottom - aligns the bottom of the box with the
bottom of the line box.
In CSS1 vertical-align only took percentage and some
named values but CSS2:10.8.1 expands the range of
premitted values a bit. See the definition of line-height
for details.
|
©
1998-2025
Laura
L.
Carlson