HTML and CSS Reference
In-Depth Information
Fixing the line height
Recall that in the last chapter, we made the line height of the text in
the lounge a little taller than normal. This looks great, but in the elixirs
we want our text to be a normal, single-spaced line height to match
the handout. Sounds easy enough, right? Just set the
line-height
property on the
<div>
and everything will be fine, because line height
is inherited. The only problem is that the headings will also inherit the
line height, and we'll end up with something like this.
If you
set the line-height prop
erty on
the en
tire <div>, then it will b
e inherited
by all
elements in the <div>, in
cluding the
headin
gs. Notice that the line
height in
the he
ading is too small and th
e two lines
are st
arting to run together.
#elixirs {
line-height: 1em;
}
The reason that the line height for the elixirs heading is too
small is because every element in the elixirs
<div>
inherits
the line height of 1em, or “1 times the font size of the
elixirs element,” which in this case is “small”, or about 12
pixels (depending on your browser). Remember, the elixirs
<div>
is inheriting its font size from the
<body>
element,
which we set to “small”.
body size is "small"
div id="elixirs"
size is "small"
The li
ne-hei
ght of
<h2>
is set
to 1 t
imes
the f
ont siz
e of
elixir
s, whic
h is “sm
all”,
or ab
out 12
pixels
.
h2 is 120% of "small"
What we really want is for all the elements in the elixirs
<div>
to have a line height that's based not on the font
size of the elixirs
<div>
, but rather the font size of each
element itself. We want the
<h2>
heading to have a
line height that is 1 times its font size (which is 120% of
“small”), and the
<p>
should also have a line height of 1
times its font size (which is “small”). How can you do this?
Well, the
line-height
property is a bit special because
you can use
just a number
instead of a relative measure
—
like
em or %
—
for it. When you use just the number 1, you're
telling each element in the elixirs
<div>
to have a line
height of 1 times its
own
font size, rather than the font size
of the elixirs
<div>
. Give it a try; set the line height of the
elixirs
<div>
to 1, and you'll see that it fixes the heading.
body line-height is
1.6 times "small"
div id="elixirs"
line-height is 1 times
"small", or about 12 pixels
We w
ant <
h2> to
have
a line
-heigh
t
that
is 1 t
imes
its o
wn fo
nt size
;
that
is, 14
pixels
(120
% of
small).
h2 is 120% of "small"
line-height is 1 times
120% of "small", or
about 14 pixels
#elixirs {
line-height: 1;
}
