equal spacing between text of different size in CSS

Question

How can I get equal spacing between lines of different sizes with CSS? Here is my base html:

  <div style="font-size: 200%">A</div>
  <div style="font-size: 100%">B C</div>
  <div style="font-size: 50%">D E F</div>
  <div style="font-size: 25%">G H I</div>

I want the same spacing between each line despite different font sizes (i.e. the red arrows below should be equal). I can't figure out how to do this with the CSS line-height property.

Answer 1

I think the other answers are almost there, but line-height is a little different. The way I think about it is that line-height is the amount of space from the center of the letter. So if your line-height is 50px, there will be 25px space above the middle of the letter and 25px space below the middle of the letter. This makes the line 50px tall.

So to make the space between them even, I would use a margin-bottom and set the line-height to something that looks like it butts right up to the top and bottom of the letter (probably different depending on the font you use). In my example below, I set the line-height to .7 (you can see how it butts up to the letter's actual baseline and top height with the red border. Then I gave a margin value with rem units so that it is relative to the original page font size, not the div itself with a unique font size.

body {
  font-size: 24px;
}

div {
    line-height: .7;
    margin-bottom: 1rem;
    border: 1px solid red;
}

<div style="font-size: 200%">A</div>
<div style="font-size: 100%">B C</div>
<div style="font-size: 50%">D E F</div>
<div style="font-size: 25%">G H I</div>

Answer 2

Use a fixed line height:

div {
    line-height: 50px;
}

Example:

body {
  font-size: 24px;
}

div {
    line-height: 50px;
    border-bottom: 1px solid #f2f2f2;
}

<div style="font-size: 200%">A</div>
<div style="font-size: 100%">B C</div>
<div style="font-size: 50%">D E F</div>
<div style="font-size: 25%">G H I</div>