Why does text with a larger font-size show up lower than other text and how to stop it?

user_15370419 0
Viewed 147

Why does text with a larger font-size show up lower than other text and how to stop it? I have been experiencing this problem for a long time but I manage to find a workaround always, like lowering the other text.

However, this time I absolutely need it to stay upwards. How can I make the text appear higher up on the screen?

<div style = 'display:flex; justify-content:space-between;'>
        <p style = 'font-size:60px;'>Lorem ipsum</p>
        <p style = 'font-size:30px;'>Lorem ipsum</p>
    </div>

microsoft-edge flexbox font-size css html
2 Answers

The reason it happens is due to line-height. You can set that to a uniform size for all font sizes, or you can center with flexbox:

div {
     display:flex; 
     justify-content:space-between;
     align-items: center; /* <-- here's your huckleberry -->
}
<div>
    <p style = 'font-size:60px;'>Lorem ipsum</p>
    <p style = 'font-size:30px;'>Lorem ipsum</p>
</div>

user_12648040

Just add align-items: baseline; to your flex container to put both texts on the same baseline:

<div style='display:flex; justify-content:space-between;align-items:baseline;'>
  <p style='font-size:60px;'>Lorem ipsum</p>
  <p style='font-size:30px;'>Lorem ipsum</p>
</div>

user_56416690
Related