CSSでの行間と字間の調節方法【現役エンジニアが解説】

PROGRAM

今回は、CSSでの行間と字間の調節方法について、それぞれに分け、簡単に解説していきます。

行間の調節

line-heightプロパティで行の高さを指定可能です。

line-heightプロパティの値はpxやem、%等の単位で指定します。

.hoge{
    line-height:1.5em;
}

上記のコードでは、hogeのクラスの要素の行の高さを親要素の文字サイズの1.5倍にしています。

字間の調節

字間は、letter-spacingプロパティで調節できます。

letter-spacingプロパティの値も、pxやem、%等の単位で指定します。

.hoge{
    letter-spacing:10px;
}

上記のコードでは、hogeのクラスを持つ要素の字間のスペースを10ピクセルのサイズにしています。

余白の調節

文章単位の調節は、marginプロパティを使うことも有効です。

marginプロパティの値もpxやem、%等の単位で指定することができます。

.hoge{
    margin:10px;
}

上記のコードでは、hogeというクラスを持つ要素の外側の余白を、上下左右10ピクセルのサイズにしています。