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.”
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, line-height is a bit special because you can use just a
number instead of a relative measure – like em or % – for
line-height. When you use just a number, 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.