web-dev-qa-db-ja.com

行間を設定する

MS Wordで設定できるように、CSSで行間隔を設定するにはどうすればよいですか。

cssline
128
Moon

line-height プロパティを試してください。

たとえば、12pxのfont-sizeと4pxは下の行と上の行から離れています。

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

またはemユニット付き

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

このパーティーに遅れていますが、追加したいと思いました。

行数である単位なしの値を使用することもできます。line-height: 2;はダブルスペース、line-height: 1.5;は1.5などです。

93
MikeTheLiar

圧縮線が必要な場合は、font-sizeとline-heightに同じ値を設定できます。

あなたのCSSファイルに

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

あなたのHTMLファイルに

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

- > jsfiddle.netでこのスニペットを使って プレイしてください

細かい線の間隔を制御するためにline-heightを増やすこともできます。

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

行の高さ（<p>ブロック間の間隔）を使用してCSSで段落間の間隔を設定することはできません。代わりに、段落内の行間、つまり<p>ブロック内の行間の間隔を設定します。つまり、行の高さは、段落内のタイポグラファーの行間の先頭が行の高さによって制御されます。

現時点では、CSSでフォントのプロパティにemまたはremのバリアントを使用しているかどうかにかかわらず、（たとえば）0.15emのinter -<p>の間隔を作成する方法はわかりません。もっと複雑なフロートやオフセットでも可能だと思います。残念これはCSSに必要です。

9
Thomas Visel

この物件を試す

line-height:200%;

または

line-height:17px;

ボリュームを上げ下げする

8
ANANTH.S

これがあなたが意図したものであるかどうかはわかりません。

line-height: size;
3
Alan Haggai Alavi

line-heightプロパティを試してください。行の高さを割り当てる方法はたくさんあります

3
Harsha M V

うん、誰もが言っているように、line-heightが重要です。使用しているフォント、ミッドハイト文字（aや■など、上または下を通過しない）は、line-height: 0.6から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>
0
RubenVerg

lineSpacingはReact Native（またはネイティブモバイルアプリ）で使用されます。

Webの場合はletterSpacing（またはletter-spacing）を使用できます

0
Eric Kim