CSS: Warum erhöht die Reduzierung der Schriftgröße eines benachbarten Inline-Elements die Gesamtführung?

Question

Ich habe ein Element, das zwei Span-Tags enthält, die jeweils etwas Text enthalten. Das Containerelement legt eine Schriftgröße fest, und die Schriftgröße für das zweite Span-Tag wird auf eine niedrigere Größe festgelegt. Wenn der zweite Bereich in der Schriftgröße reduziert wird, wird der Abstand zwischen der Linie und dem nächsten Blockelement vergrößert. Dies geschieht sowohl in WebKit als auch in Gecko.

p Das Behälterelement weist { margin-bottom: 0; padding-bottom: 10px; } und seine Geschwister hat folgende { margin-top: -5px; }

Die folgende Abbildung zeigt die Situation, und enthält eine Momentaufnahme des relevanten Teils der Dokumentstruktur in FireBug.

Warum der Abstand unter dem p-Tag zu erhöhen, nachdem die Schriftgröße des zweiten span-Tages zu reduzieren?

Answer 1

Meine Vermutung ist, dass Sie eine (relativ) große Zeilenhöhe von dieser Dezimalspanne geerbt haben (vielleicht 32px?), Und wenn Sie die Schriftgröße auf 18px reduzieren, erhalten Sie eine Situation, in der die Basislinie der Dezimalzeichen stimmen mit den nichtdezimalen Zeichen überein, aber die Zeile muss immer noch die gesamte angegebene Zeilenhöhe einnehmen. Daher wird zusätzlicher Speicherplatz unterhalb der Grundlinie hinzugefügt.

eine line-height Regel hinzufügen, und ich wette, das geht weg:

.box .value > .decimal { line-height: 18px; }