Setel spasi baris

145

Bagaimana saya bisa mengatur spasi baris dengan CSS, seperti kita dapat mengaturnya dalam MS Word?

css line Bulan
sumber

236

Misalnya, ukuran font 12px dan 4px jauh dari garis bawah dan atas:

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

Atau dengan emunit

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

Mario Cesar
sumber

10

Saya menemukan bahwa saya juga perlu display: block;agar pengaturan ini efektif di mana-mana, bukan hanya paragraf atas dan bawah.

PatrickT

2

Ingatlah bahwa Anda tidak dapat menetapkan nilai properti tinggi-garis pada '1' atau '100%' jika Anda menyetelnya ke elemen <a>. Jika Anda menginginkannya, Anda dapat mengatur antara teks Anda dan <a> Anda, misalnya.

raulchopi

2

ini tidak bekerja dengan span karena seperti yang disebutkan oleh span @PatrickT tidak ditampilkan: block

walv

1

@walv, itu tidak seharusnya. Juga jika Anda perlu menggunakannya dalam rentang, itu lebih baik menggunakan tampilan: inline-blok, daripada tampilan: blok.

Mario Cesar

1

@Userthatisnotauser Anda tidak dapat hal serupa akan terjadi pada pengguna yang perlu menggunakan java applet atau aplikasi web yang memerlukan ᴜᴅᴘ socket (karena kehilangan ɴᴘᴀᴘɪ dukungan dan semua browser menarik dukungan di plug-in kustom mereka ᴀᴘɪ) . Situs web dedicated yang didedikasikan untuk misi Cassini masih memerlukan plugin waktu cepat untuk menonton video mereka ꜱ secara online. Belum lagi ɴᴘᴀᴘɪ plugin memungkinkan Anda untuk menonton video stereoskopik melalui tampilan stereoscopic dalam streaming. Di negara saya, dua penyedia saluran tv besar masih membutuhkan sinar matahari dengan rencana untuk tidak memutakhirkan.

user2284570

103

Anda juga dapat menggunakan nilai unit-less, yang merupakan jumlah baris: line-height: 2;spasi ganda, line-height: 1.5;satu setengah, dll.

MikeTheLiar
sumber

Ini tidak berfungsi di Opera berbasis Presto. Saya butuh solusi ... tolong! : \

user2284570

@ status pengguna: berfungsi di mesin saya. Apakah Anda mencoba jawaban yang lain?

MikeTheLiar

Maksud saya elemen CSS dikenali, tetapi tidak mempengaruhi hasil rendering. Diuji 12.16 dan 12.50. Jawaban lainnya pada dasarnya sama: MEREKA SEMUA MENGATAKAN untuk menggunakan elemen garis-tinggi!

user2284570

@user Karena itulah cara Anda melakukannya. Saya akan membayangkan itu adalah bug browser atau kurangnya dukungan untuk aturan css itu. Mungkin harus ditanyakan sebagai pertanyaan terpisah.

MikeTheLiar

Tentu saja, meminta solusi adalah di luar topik di sini ... dengan cara saya melihatnya mempengaruhi merek browser lain: ada ketika pengaturannya diatur dengan DOM atau ketika contenteditable = "true" hadir.

user2284570

12

Anda tidak dapat mengatur jarak antar paragraf di CSS menggunakan ketinggian baris, jarak antar blok. Alih-alih itu mengatur spasi baris intra-paragraf, ruang antara garis dalam sebuah blok. Yaitu, garis-tinggi adalah garis-garis antar juru ketik yang terdepan dalam paragraf dikontrol oleh garis-tinggi.

Saat ini saya tidak tahu metode apa pun dalam CSS untuk menghasilkan (misalnya) jarak 0.15em , apakah menggunakan varian em atau rem pada properti font apa pun. Saya kira itu bisa dilakukan dengan pelampung atau penyeimbangan yang lebih kompleks. Sayang sekali ini diperlukan dalam CSS.

Thomas Visel
sumber

7

Tidak bisakah Anda menggunakan margin untuk itu untuk jarak?

Flimm

4

Dalam beberapa kasus, margin-topdan / atau margin-bottomdapat secara efektif mencapai apa yang diinginkan di sini.

user1147171

10

Jika Anda ingin baris terkondensasi, Anda dapat menetapkan nilai yang sama untuk font-sizedanline-height

Di file CSS Anda

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

Di file HTML Anda

<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>

-> Mainkan dengan cuplikan ini di jsfiddle.net

Anda juga dapat meningkatkan line-heightuntuk kontrol spasi garis halus:

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

olibre
sumber

9

Coba properti ini

line-height:200%;

atau

line-height:17px;

gunakan kenaikan & penurunan volume

ANANTH
sumber

@ AVD: Tidak berfungsi di Opera berbasis Presto. Saya butuh solusi ... tolong! : \

user2284570

4

Saya tidak yakin apakah ini yang Anda maksud:

line-height: size;

Alan Haggai Alavi
sumber

4

Coba line-heightproperti; ada banyak cara untuk menetapkan ketinggian garis

Harsha MV
sumber

1

Yup, seperti kata semua orang, line-heightadalah masalahnya. Huruf apa pun yang Anda gunakan, karakter menengah ke atas (seperti a atau ■, tidak melewati bagian atas atau bawah) harus sesuai dengan tinggi-panjang yang sama line-height: 0.6pada 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>

Luaskan cuplikan

RubenVerg
sumber

0

lineSpacing digunakan dalam React Native (atau aplikasi seluler asli).

Untuk web Anda dapat menggunakan letterSpacing(atau letter-spacing)

Eric Kim
sumber

Setel spasi baris

Jawaban: