Satır aralığını ayarlama

145

MS Word'de ayarlayabildiğimiz gibi CSS ile satır aralığını nasıl ayarlayabilirim?

css line

— Ay
kaynak

236

Line-height özelliğini deneyin .

Örneğin, alt ve üst satırlardan 12 piksel yazı tipi boyutu ve 4 piksel uzak:

line-height: 20px; /* 4px +12px + 4px */

Veya embirimlerle

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

— Mario Cesar
kaynak

10

display: block;Bu ayarların yalnızca paragrafın üst ve alt kısmında değil, her yerde etkili olması için gerekli olduğunu buldum .

— PatrickT

2

<a> öğesine ayarlıyorsanız, satır yüksekliği özelliğinin değerini '1' veya '% 100' altında ayarlayamayacağınızı unutmayın. İsterseniz, metninizle <a> metniniz arasında bir ayarlayabilirsiniz.

— raulchopi

2

@PatrickT span tarafından belirtildiği gibi görüntülenmediği için span ile çalışmaz: block

— walv

1

Ayrıca, bir açıklıkta kullanmanız gerekiyorsa, display: inline-block, display: block yerine tercih edilir.

— Mario Cesar

1

@Userthatisnotauser, ᴜᴅᴘ soket gerektiren java uygulaması veya web uygulaması kullanması gerekecek kullanıcılara benzer bir şey olamaz (desteğin kaybolması ve tüm tarayıcılar özel eklentilerinde desteği geri çektiği için) . Cassini misyonuna adanmış web sitesi, videolarını çevrimiçi izlemek için hala hızlı zaman eklentisine ihtiyaç duymaktadır. Sadece ɴᴘᴀᴘɪ eklentilerinden bahsetmemek, akıştaki stereoskopik ekranlardan stereoskopik video izlemenizi sağlar. Ülkemde, iki büyük tv kanalı sağlayıcısı hala yükseltmemeyi planlayan silverlight'a ihtiyaç duyuyor.

— user2284570

103

Ayrıca, satır sayısı olan birimsiz bir değer de kullanabilirsiniz: line-height: 2;çift aralıklı, line-height: 1.5;bir buçuk, vb.

— MikeTheLiar
kaynak

Presto tabanlı Opera'da çalışmaz. Geçici bir çözüme ihtiyacım var ... lütfen! : \

— user2284570

@ kullanıcı durumu: makinemde çalışır. Diğer cevaplardan herhangi birini denediniz mi?

— MikeTheLiar

CSS öğesi tanınıyor, ancak oluşturma çıktısını etkilemiyor. 12.16 ve 12.50'de test edildi. Diğer cevap temel olarak aynıdır: Satır yüksekliği öğesini kullanmak için TÜMÜNÜ SÖYLEYİN!

— user2284570

@user Çünkü böyle yapıyorsunuz. Bir tarayıcı hatası veya bu css kuralı için destek eksikliği olduğunu hayal ediyorum. Muhtemelen ayrı bir soru olarak sorulmalıdır.

— MikeTheLiar

Elbette, bir geçici çözüm sormak burada konu dışı ... Gördüğüm gibi diğer tarayıcı markalarını etkiledi: ayar DOM ile ayarlandığında veya contenteditable = "true" mevcut olduğunda var.

— user2284570

12

Satır yüksekliğini, bloklar arasındaki boşluğu kullanarak CSS'de paragraflar arası boşluk ayarlayamazsınız . Bunun yerine paragraf içi satır aralığını, bir blok içindeki satırlar arasındaki boşluğu ayarlar . Yani, satır yüksekliği tipografın paragraf içindeki satır aralığı satır yüksekliği tarafından kontrol edilir.

Şu anda herhangi bir font özelliğinde em veya rem varyantları kullanarak 0.15em aralık oluşturmak için (örneğin) CSS'de herhangi bir yöntem bilmiyorum . Daha karmaşık şamandıralar veya ofsetlerle yapılabileceğinden şüpheleniyorum. Yazık ki bu CSS'de gerekli.

— Thomas Visel
kaynak

7

Aralıklar için bunun için marjlar kullanamaz mısınız?

— Flimm

4

Bazı durumlarda margin-topve / veya margin-bottomburada istenenleri etkili bir şekilde başarabilir.

— user1147171

10

Yoğun hatlar istiyorsanız, font-sizeve için aynı değeri ayarlayabilirsiniz.line-height

CSS dosyanızda

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

HTML dosyanızda

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> Bu snippet ile jsfiddle.net'de oynayın

line-heightİnce çizgi aralığı kontrolü için de artırabilirsiniz :

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}

— olibre
kaynak

9

Bu mülkü deneyin

line-height:200%;

veya

line-height:17px;

sesi artır ve azalt kullan

— ANANTH.S
kaynak

@AVD: Presto tabanlı Opera'da çalışmaz. Geçici bir çözüme ihtiyacım var ... lütfen! : \

— user2284570

4

Ne demek istediğini emin değilim:

line-height: size;

— Alan Haggai Alavi
kaynak

4

line-heightMülkü deneyin ; satır yüksekliği atamanın birçok yolu vardır

— Harsha MV
kaynak

1

Evet, herkesin dediği gibi line-height, şey bu. Kullandığınız tüm yazı tipleri, orta yükseklikteki bir karakter (a veya ■ gibi, üst veya alttan geçmeyen), ile aynı yükseklik uzunluğunda line-height: 0.6olmalıdır 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>

Snippet'i genişlet

— RubenVerg
kaynak

0

lineSpacing React Native'da (veya yerel mobil uygulamalarda) kullanılır.

Web için şunları kullanabilirsiniz letterSpacing(veya letter-spacing)

— Eric Kim
kaynak