Font-size And The Size (height) Of Links Around Text

font-size sets the font height. Font height is measured or specified by the height of a line, which is the full height required to display the gamut of characters, including those

Solution 1:

It is because anchor tag <a> is an inline element, inline elements size (width & height) is depended on the content size if you change your CSS code to this:

a {
     display:block;
     width:200px;
     background-color: pink; 
     text-decoration: none;}

You will see the height of the <a> element will be the same as <li> element.

So, if you want to use an inline element inside of a block-level element you should change the size manually or use properties that can convert the type of the element.

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The height of a line box is determined by the rules given in the section on line height calculations.

Solution 2:

Many thanks to Alireza and FluffyKitten. I believe this is the answer:

Font-height is determined differently for different fonts. It is not always the height from the lowest glyph to the highest glyph (for example from the lowest part of the ascender 'p' to the highest part of an accent on a capital letter 'À').

https://www.w3.org/TR/CSS21/visudet.html#line-height

CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom. (See the note below for how to find A and D for TrueType and OpenType fonts.) Note that these are metrics of the font as a whole and need not correspond to the ascender and descender of any individual glyph.

These two screen grabs show how two different fonts deal with font-size differently. First example is Elena. Second example is Times New Roman.

The first one has more vertical space above and below the letters. Whereas the font-size of the second font is closely determined by the lowest ascender and tallest descender.

Interesting point

If the line-height is set to 1 or 1em (making the line-height the same height as the font-size) then many letters bleed out of the font-size / line-height. Which is weird. See below. This is font-size 50px line-height: 50px and the descenders aren't included in the height of the font or line-height!!

However, the height of the inline <a> link continues to contain all the fonts glyphs. i.e. the height on an inline element is determined not by font-size (or line-height) but by the in-built font metrics.

It seems to me that there should be a consistent way to measure CSS font-size (from the lowest to highest glyph?). At the moment different fonts are using different in-built metrics and it's a mess.