CSS: Bitişik bir satır içi öğenin yazı tipi boyutunu küçültmek neden genel liderliği artırıyor?

Question

Her biri bir metin içeren iki span etiketi içeren bir öğem var. Kapsayıcı öğesi bir yazı tipi boyutunu ayarlar, ardından ikinci yayılma etiketindeki yazı tipi boyutu daha düşük bir boyuta ayarlanır. Yazı tipi boyutunda ikinci yayılma azaldığında, satır ile sonraki satır öğesi arasındaki boşluk artırılır. Bu, hem WebKit hem de Gecko'da gerçekleşir.

p konteyner eleman { margin-bottom: 0; padding-bottom: 10px; } sahiptir ve şu kardeş aşağıdaki görüntü durumu göstermektedir ve FireBug doküman yapısının ilgili bölümünün bir anlık içeren { margin-top: -5px; }

sahiptir.

neden olan ikinci açıklık etiketinin yazı tipi boyutunu azaltarak sonra arttırarak p etiketine altındaki boşluk?

Answer 1

Benim tahminim, ondalık uzunluğa (belki de 32px?) Göre miras kalan (nispeten) büyük bir çizgi yüksekliğinizin olması ve font boyutunu 18 piksele düşürdüğünüzde, taban çizgisi ondalık glifler, nondecimal gliflerle eşleşir, ancak satır, tam olarak belirtilen satır yüksekliğini almalıdır. Böylece, taban çizgisinin altında ekstra alan eklenir.

bir line-height kuralı ekleyin ve bu uzağa gider bahis: bir açıklama için

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