Aşağıdaki CSS davranışını da in this fiddle resimli şaşkın durumdayım.

<style type="text/css">
p {
    font-size: 14px;
}

.percentage {
    line-height: 150%;
}

.em-and-a-half {
    line-height: 1.5em;
}

.decimal {
    line-height: 1.5;
}

.smaller {
    font-size:50%;
}

.caption {
    font-weight: bolder;
    font-size: 80%;
}

</style>

<p class="caption">default line spacing</p>

<p>This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p>This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 150%</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5em</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

İlk iki paragraf varsayılan satır aralığı var. İkinci paragraf küçük bir kelime vardır. Ama bu paragraf satır aralığı etkilemez. Gerektiğini değil, ama sonra

Sonraki iki paragraf line-height: 150%. Yine, ikinci paragraf küçük bir kelime vardır. Ama bu kez nedeni belirsiz, daha küçük yazı tipi, ilk iki satır (en az Safari, Chrome, Firefox ve Explorer arasında fazladan bir boşluk yaratır. Bu düzeltmeye çalışıyordum bu benim CSS orijinal sorun. (Tarayıcı ile ilgili bir şey kelime küçülen ve değişen aşağıya doğru dikey çizgilerini yeniden hizalamak olduğunu spekülasyon.)

Sonraki iki paragraf line-height: 1.5em var. Benim anlayış 1.5em 150% olarak aynı olmasıdır. Ve gerçekten de, aynı davranıştır: ikinci paragrafın ilk iki hat arasında fazladan boşluk.

Ama işin garip kısmı da busonraki iki paragraf line-height: 1.5 — hiçbir birim belirttiniz. Bu sefer, ekstra alanı sorunu ortadan kalkıyor.

Özetle, CSS gibi görünüyor vererek tutarlı satır aralığı sonuçları ne zaman satır Yükseklikleri üst ve alt farklı (miras unitless değer) ama tutarsız sonuçlar ne zaman satır Yükseklikleri, üst ve alt aynı.

Bu nedenle sorularım:

1. 1.5 150% arasında 41* *kasıtlı bir anlam fark veya onun eş anlamlısı, 1.5em olduğunu biliyorum. (Yani: bir unitless değeri iletilir alt element ve onun satır yüksekliği hesaplanır kullanarak çocuğun yazı tipi boyutu, oysa bir yüzdesi ya da onlara değer verecek neden bir satır yüksekliği için hesaplanan veli, ve daha sonra bu hesaplanan değer iletilir çocuk.) Ama nasıl bu davranış farkı burada gördüğüm için hesap? Nereye ekstra uzaydan mı geliyor? Eğer biraz CSS konumlandırma kural bir sonucu ise, o kural nedir?

2. Ya da, eğer bu örnekler aynı şekilde işlemek gerekiyorsa, o zaman bir yanlış uygulanıyor? (Q2 not: soru döndüreceğim işleme cilvesi farklı tarayıcılar şiddetle hiçbiri yanlış uygulanan öneriyor boyunca aynı şekilde gerçekleşmesi, (1).)

3. Pratik açıdan, line-height 1.5 gibi unitless ölçümleri geçiş için bir dezavantajı var mı?(Cevap: hayır)

Temel ipuçları önerilen cevaplar, bence render davranış görülen bu örnekler ise çok mantıksız, ama doğru ve zorunlu etkileşimi çeşitli kurallar spec, ve genel CSS box model.

1. CSS önde gelen L formülü ile bir kutu için gerekli hesaplar REKLAM *43 line-height = L AD,* yazı tipi. Daha sonra önde gelen Bir diğeri eklenir "yarım D. aşağıda yarısı" font-size:16px o Kadar metin ve line-height:24px yukarıda ve aşağıda gelen 4px olacak. Metin font-size:8px line-height:24px yol 8px olacak yukarıda ve aşağıda.

2. Varsayılan olarak, ancak, "user agent must align the glyphs ... by their relevant baselines.". Bu burada neler olduğunu anlatmaya başlar. line-height olduğunda yüzde ya da onlar tarafından belirtilen, hesaplanmış bir değer tarafından devralındı çocuk (burada smaller süresi). Anlamı smaller span alır üst blok olarak line-height aynı. L yüzünden ama Bu yayılma metin üstünde daha önde olduğu AD, formül ve alt ve böylece temel kendi kutusunda daha yüksek oturur. Tarayıcı iter smaller span taban eşleşmesi için dikey.

3. Ama sonra tarayıcı satırı ile başa çıkmak için nasıl yeni bir sorun var — bu boşluk tarafından işgal edilmiş, hangi çevreleyen blok, temel ayarlama işlemi. Spec de bu giderir: Blok düzeyi öğesi "specifies the minimal height of line boxes within the element" 22*. Anlam, CSS tam alacaksın hiçbir söz yapar En azından bu miktarı alırsınız line-height sadece. Bu yüzden tarayıcı böylece ayrı hatları kapsayan blok iter realigned çocuk kutu uygun olacaktır.

Bu counterinitutive nedeni işlemci ve sayfa mizanpajı programları çoğu kelime nasıl çalıştığını tam tersi. Bu programlar, daha küçük bir streç metnin bir paragraf olduğunu yöneltilmiş t (CSS) ama satır yüksekliği olarak uygulanır bir mesafe arasında bir taban, bir kutu çevresindeki küçük metin. Ama bu bir hata değil — CSS box model etrafında tasarlanmıştır. Sonunda, bu boşluğu davranış modeli bir sonucu olduğunu söyleyebiliriz.

Yine de bizi unitless ile örnek line-height: davranışı açıklamak için bırakır

1. İlk olarak, hiçbir zaman line-height belirtilen unutmayın, tarayıcı bir unitless line-height geçerli olacak varsayılan. Bu required by the spec: line-height başlangıç değeri için tanımlanan normal. &; sayı>", ve spec önerir lt "aynı anlama gelir "arasında 1.0 ve 1.2". değer Ve görüyoruz ki ne ile tutarlı. yukarıdaki örneklerde, *27 ile paragraflar* line-yükseklik ayarı ile paragrafları aynı davranışı (yani, impliedly line-height: normal alıyorsanız)

2. Diğer paragraf olduğunda işaret gibi line-height: 1.5 paragraf ve satır yüksekliği hesaplanır smaller span miras değil. Bunun yerine, smaller span kendi satır yüksekliği kendi yazı tipi boyutuna bağlı olarak hesaplar. O zaman paragraf line-height: 1.5; font-size: 14px, o zaman vardır hesaplanan satır yüksekliği 14px * 1.5 = 21px. Ve eğer smaller span yalnızca font-size: 50%, yazı tipi boyutu özelliği vardır 50% = 14px * 7px ve satır yüksekliği 7px * 1.5 = 10.5 (px olur genellikle) bütün bir piksel için yuvarlanır. Ama genel olarak, smaller kutusu, çevresindeki metnin yarısı kadar.

3. Önce, tarayıcı, dikey smaller span hizalanır olarak bitişik çizgisi. Ama bu sefer kutunun etrafında çünkü smaller çevreleyen metinden daha kısa, bu yeniden düzenlenmesi. herhangi bir yan etkisi yoktur kapsayan blok. Zaten üst paragraf satırları yaymaya gerek yok hayır çok yakışıyor,, daha önce de vardı.

Her iki durumda spec tutarlı bir uygulama temsil eder.Bu satır aralığı davranışı önceden tahmin etmek anlamına gelir, çünkü bu iyi bir haber.

Bize bu soru için orijinal nedeni geri getiriyor. Ben şimdi CSS kutu modeli bu davranış gerektiren anlamak, pratik bir akıllı bir yanı olsa da, bu nadiren istiyorum davranıştır. İstediğim şey, eğer bu paragraf içindeki metnin bir kısmını kapsayan daha küçük olsa bile tutarlı ve tam satır aralığı için bir paragraf içinde satır.

Ne yazık ki, kelime işlemci ya da sayfa mizanpajı programı doğrudan kesin bir çizgi gibi CSS Aralık zorlamak için bir yolu yok gibi görünüyor. Yine, bu nedenle CSS kutu modeli: yok kullanım baseline-taban çizgisi satır aralığı modeli ve line-height belirtilen bir minimum ölçüm, maksimum.

Ama en azından unitless line-height değerlerini en iyi ürünü diyebilirizyaklaşımtam satır CSS aralığı. Benim gibi titiz matbaacılar unitless değerleri 48**, ve tarayıcılar arasında tutarlı sonuçlar üretmek çünkü bunları kullanarak rahat hissediyorum. Bir hack değildir, ne de itiraz ediyorlar.

Bu uyarı hala sadece bir yaklaşım. Line-height Unitless değerleri temel CSS kutu modeli değişmez, ne de CSS-positioning kutusu kuralları. Bazı kenar durumlarda, amaçlanan sonucu olmayacak bu mümkün değil. Ama sonsuza dek tetikte iyi tipografi fiyatı. Orada dikkatli olun.