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;
Search WWH ::

Custom Search