CSSでの行間と字間の調節方法【現役エンジニアが解説】
今回は、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ピクセルのサイズにしています。