css · level 1 · unit 3 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
line-height adds room between the lines.
When a paragraph wraps onto several lines, the room each line takes up is its . Too little and the lines feel crammed. A bit more makes long text .
Give line-height a plain number with no unit, and it works as times the font size. 1.5 on 16px text gives each line 24px of room.
One rule can mix every text property you have met: font, size, weight, alignment and line height. Keep each declaration on its own line so it stays tidy.
<p>Hedgehogs snuffle about at night, looking for beetles, worms and slugs. One hedgehog can wander two miles in an evening.</p> p {
font-family: Georgia, serif;
font-size: 18px;
line-height: 1.6;
} Press show my page to see it here.
Try 1 and then 2 to feel the difference.
guess first
How much room does each line get?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p>Penguins cannot fly, but they swim very fast.</p> p {
font-size: 20px;
line-height: 2;
}
your turn
Your turn. Style a whole story.
Fill in the blanks: a font list that ends with a fallback, a size from 18px to 24px, and a line height from 1.2 to 2.
the page you’re styling
<h1>The wise old owl</h1>
<p>The owl sat in the old oak tree. The more she saw, the less she spoke. The less she spoke, the more she heard.</p>your css
Press show my page to see it here.
- the font list ends with a fallbacknot checked yet
- the text is 18px to 24pxnot checked yet
- the lines have extra roomnot checked yet
fix it
The lines are still squashed. Can you fix it?
the page you’re styling
<p>Bake the cake for forty minutes, then leave it to cool before you add the icing and the sprinkles.</p>your css
Press show my page to see it here.
- each line has 24px of roomnot checked yet
- The lines did not spread out. Look closely at the number.
- In CSS, the dot in a decimal number is a full stop, never a comma.
- Change
1,5to1.5, then press run.
nailed it
you gave your words room to breathe. :D
line-heightsets how much room each line gets.- A number like
1.5means times the font size. - Write decimals with a full stop:
1.5, not1,5.
new words in your collection
- line height
- readable
This lesson isn’t saved. A free account remembers every lesson you finish.