Warum kann man die Zeilenhöhe nicht für ein Anker-Element mit Hintergrund festlegen?

Question

Ich habe gerade erst realisiert, dass Anker-Tags mit einem Hintergrund nur ihre Zeilenhöhe erben und sie nur direkt eingestellt werden kann, indem man den Anker auf inline-block setzt.

Warum ist das so?

http://jsfiddle.net/moefinley/3H3y5/

ul li a {
    display: inline-block;
    line-height: 20px;
}

Answer 1

Hier ist die Wurzelursache:

content-area = In nicht ersetzten Elementen die Box, die durch die Schriftgröße jedes Zeichens im Element, aneinandergereiht, beschrieben wird; in ersetzten Elementen die intrinsische Höhe des Elements plus jegliche Ränder, Rahmen oder Abstände

Inline-Box = Die Hinzufügung von (halbem) Leading zum Inhaltsbereich für jedes Element; bei nicht ersetzten Elementen wird die Höhe der Inline-Box eines Elements genau dem Wert für Zeilenhöhe entsprechen; bei ersetzten Elementen wird die Höhe der Inline-Box eines Elements genau der intrinsischen Höhe des Elements plus jegliche Ränder, Rahmen oder Abstände entsprechen

Linien-Box = Die Box, die die höchsten und tiefsten Punkte der Inline-Boxen, die Teil der Zeile sind, begrenzt

Die folgenden Verhaltensweisen ergeben sich aus dieser Beschreibung:

1. Der Hintergrund eines Inline-Elements wird auf den Inhaltsbereich plus jegliche Abstände angewendet
2. Abstände und Rahmen an