CSS: Dlaczego zmniejszenie rozmiaru czcionki sąsiedniego elementu liniowego zwiększa ogólną liczbę wiodącą?

Question

Mam element, który zawiera dwa znaczniki span, z których każdy zawiera jakiś tekst. Element container ustawia rozmiar czcionki, a następnie rozmiar czcionki na drugim tagu span jest ustawiony na mniejszy rozmiar. Kiedy drugi zakres jest zmniejszony w rozmiarze czcionki, zwiększa się przestrzeń między linią a następnym elementem bloku. Dzieje się tak zarówno w WebKit, jak i Gecko.

Element p pojemnik ma { margin-bottom: 0; padding-bottom: 10px; } i jego rodzeństwo ma następujący { margin-top: -5px; }

Poniższy rysunek ilustruje sytuację i zawiera migawkę odpowiedniej części struktury dokumentu w Firebug.

co jest odległością pod znacznika p coraz po zmniejszeniu rozmiaru czcionki drugim znacznikiem przęsła?

Answer 1

Domyślam się, że masz (stosunkowo) dużą wysokość linii odziedziczoną po tym dziesiętnym przęśle (prawdopodobnie 32px?), A kiedy zmniejszysz rozmiar czcionki do 18px, otrzymasz sytuację, w której linia bazowa znaki dziesiętne pasują do niedomieszkalnych glifów, ale linia musi nadal zajmować pełną określoną wysokość linii. Zatem dodatkowa przestrzeń jest dodawana poniżej linii podstawowej.

Dodaj regułę line-height i założę ten odchodzi:

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