HTML and CSS Reference
In-Depth Information
Chapter 12
Spacing
The following properties deal with the space between elements. They are all inherited by
default.
line-height
line-height
sets the distance between lines. The initial value is
normal
, which is typically
rendered as 120% of the font size. The line height can also be set to a length, a percentage
of the current font size, or a dimensionless number that is multiplied with the current
font size.
line-height : inherit | normal | <length> | <percentage> | <number>
The
line-height
property inherits, so the preferred way to set
line-height
is by
using a dimensionless number. Setting
line-height
as a length or percentage can have
unexpected results for child elements that use different font sizes because the inherited
line height is then fixed instead of relative to the child element's font size.
/* Line height is 1.5 times font size */
line-height: 1.5;
Line height has no effect on replaced inline elements such as
<img>
. When used on
non-replaced inline elements, it sets the line height as expected. For block elements,
line-height
sets the minimal height of line boxes within the element.
word-spacing and letter-spacing
word-spacing
sets the spacing between words, and
letter-spacing
sets the spacing
between individual characters. Negative values are allowed for both of these properties.
word-spacing : inherit | normal | <length>
letter-spacing : inherit | normal | <length>
