Satır yüksekliği - CSS Hileleri

line-heightÖzelliği yukarıda ve içi elemanlarının altındaki boşluk miktarını tanımlamaktadır. Yani, display: inlineveya olarak ayarlanmış öğeler display: inline-block. Bu özellik, çoğunlukla metin satırlarının satır aralığını ayarlamak için kullanılır.

p ( line-height: 1.5; )

line-heightÖzellik anahtar kelime değerleri kabul edebilir normalveya noneyanısıra bir dizi uzunluğu, veya yüzde.

Spesifikasyona göre, "normal" değeri, yalnızca tüm öğelere uygulanan tek bir somut değer değildir, bunun yerine öğedeki yazı tipi boyutuna (veya miras alınan) bağlı olarak "makul" bir değer hesaplar.

Bir uzunluk değeri, herhangi bir geçerli CSS birimi (px, em, rem, vb.) Kullanılarak tanımlanabilir.

Yüzde değeri, öğenin yazı tipi boyutunun yüzde ile çarpımıdır. Örneğin:

Bu Kaleme bakın!

Yukarıdaki demoda, üç paragrafın satır yükseklikleri sırasıyla% 150,% 200 ve% 250 olarak ayarlanmıştır. Gövde öğesinin yazı tipi boyutu 20 piksel olarak tanımlanmıştır. Bu, paragraflar için hesaplanan satır yüksekliklerinin sırasıyla 30px, 40px ve 50px olduğu anlamına gelir.

Birimsiz Hat Yükseklikleri

Satır yüksekliğini tanımlamak için önerilen yöntem, "birimsiz" satır yüksekliği olarak adlandırılan bir sayı değeri kullanmaktır. Bir sayı değeri, bu sayfadaki ilk kod örneğinde kullanıldığı gibi, ondalık tabanlı bir sayı da dahil olmak üzere herhangi bir sayı olabilir.

Birimsiz satır yükseklikleri, alt öğelerin hesaplanan değerden ziyade ham sayı değerini miras alması nedeniyle önerilir. Bununla, alt öğeler, büyük olasılıkla geçersiz kılınması daha muhtemel olan bir üst öğeden rastgele bir değer miras almak yerine, hesaplanan yazı tipi boyutuna göre satır yüksekliklerini hesaplayabilir.