Đặt khoảng cách dòng

Làm cách nào tôi có thể đặt khoảng cách dòng với CSS, như chúng ta có thể đặt nó trong MS Word?

Hãy thử thuộc tính chiều cao dòng .

Ví dụ: cỡ chữ 12px và 4px ở xa dòng dưới cùng và trên:

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

Hoặc với emcác đơn vị

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

Bạn cũng có thể sử dụng một giá trị không có đơn vị, đó là số dòng: line-height: 2;cách nhau hai lần, line-height: 1.5;là một rưỡi, v.v.

Bạn không thể đặt khoảng cách giữa các đoạn trong CSS bằng chiều cao dòng, khoảng cách giữa <p>các khối. Điều đó thay vào đó đặt khoảng cách dòng trong đoạn, khoảng cách giữa các dòng trong một <p>khối. Nghĩa là, chiều cao dòng là dòng liên kết của người đánh máy trong đoạn văn được kiểm soát bởi chiều cao dòng.

Hiện tại tôi không biết bất kỳ phương thức nào trong CSS để tạo ra (ví dụ) <p>khoảng cách 0,15em , cho dù sử dụng các biến thể em hay rem trên bất kỳ thuộc tính phông chữ nào. Tôi nghi ngờ nó có thể được thực hiện với phao hoặc bù đắp phức tạp hơn. Đáng tiếc điều này là cần thiết trong CSS.

Nếu bạn muốn các dòng cô đặc, bạn có thể đặt cùng một giá trị cho font-sizevàline-height

Trong tệp CSS của bạn

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

Trong tệp HTML của bạn

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

-> Chơi với đoạn trích này trên jsfiddle.net

Bạn cũng có thể tăng line-heightđể kiểm soát khoảng cách dòng tốt:

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

Hãy thử tài sản này

line-height:200%;

hoặc là

line-height:17px;

sử dụng tăng và giảm âm lượng

Tôi không chắc đây có phải là ý của bạn không:

line-height: size;

Thử line-heighttài sản; có nhiều cách để gán chiều cao của dòng

Yup, như mọi người đang nói, line-heightlà điều. Bất kỳ font bạn đang sử dụng, một nhân vật giữa chiều cao (chẳng hạn như một hoặc ■, không đi qua phía trên hoặc thấp hơn) nên đi với cùng chiều cao có độ dài ít line-height: 0.6đến 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>

lineSpaces được sử dụng trong React Native (hoặc ứng dụng di động gốc).

Đối với web, bạn có thể sử dụng letterSpacing(hoặc letter-spacing)