The Baseline (Vertical Align, Line Height, etc.)
In typography, the baseline is a line the letter sit on. If you've never heard this term,
read the Wikipedia entry)
line-height describes the amount of space between the baselines.
As you probably guessed, the boxes are
inline-blocks. Inline elements sit on the baseline, but you can adjust how they set using the
vertical-align property. If you were to look this up on MDN, you'll have the default is baseline, but you can make it hang in the middle or the top accordingly.
- Always set
line-height to a number without units, this way it becomes a multiple
of whatever the font-size is. This way,
line-height: 2; is like double spacing,
and if the font-size changes, your typography holds together.
vertical-align describes the relationship between things to the baseline, its
effect will be more pronounced when the baselines are further apart (bigger