CODEWITHSUNDEEP
htmlcss
Scipion
Scipion

Reputation: 11888

Top aligning two spans with different font-size

I do have the following code:

<div>
  <span class='foo' style='font-size: 10px'>Foo</span>
  <span class='blah' style='font-size: 25px'>Blah</span>
</div>

I would like to top align both of them. At the minute, Foo is not top aligned because the font-size of Blah is bigger. How can I fix this ?

Here is a codepen

Upvotes: 0

Views: 172

Answers (1)

Marian Rick
Marian Rick

Reputation: 3430

You can achieve this using

span {
    vertical-align: top;
}

DEMO

As you can see using the green background both divs are aligned using their top corner. If you want to do further aligning you can although add display: inline-block, to stylize them and add paddings:

span {
  vertical-align: top;
  display: inline-block;
}
span.foo {
  margin-top: 3px;
}

DEMO #2

This time they look like their top is aligned (even if the first one is actually below the second one).

Upvotes: 1

Related Questions