CODEWITHSUNDEEP
cssvertical-alignmentfont-size
Alexander
Alexander

Reputation: 708

Vertical dimensions of inline-block elements with text of different font size

I have a series of elements with display:inline-block. They contain text of different font-sizes, and are displayed next to each other.

I am trying to understand where the vertical dimensions of the elements come from.

Here is the simple code :

<a class="icon"></a>
<a>H</a>
<a class="icon"></a>
<a>H</a>
<a class="icon"></a>

and the CSS :

a {
  font-family: consolas;
  display: inline-block;
  padding: 10px;
  font-size: 14px;
}

.icon:before {
  content: "H";
  font-size: 44px;
}

a:not(:empty) {
  padding: 25px; // (44-14) / 2 + 10
}

Now, contrary to what I would expect, 25px is not the correct value for padding to compensate the font size difference, but 27px is.

I don't really understand why the text height for font-size: 44px is actually 51px and for 14px it is 17px.

Once these values are taken into account, it makes sense (51 - 17) / 2 + 10 = 27 is the right padding compensation.

See fiddle here

Upvotes: 0

Views: 1528

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

For an inline element, which is what a :before pseudo-element is by default, the height is determined in a manner that depends on the font and on the browser, by the CSS 2.1 spec.

If you set display: inline-block on the :before pseudo-element, then you can set its height using the height property, if desired.

Upvotes: 0

kei
kei

Reputation: 20491

It has to do with line-height

Set the font-size and the line-height to be the same if you want them to line up.

DEMO

Upvotes: 1

Related Questions