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ピクセルのサイズにしています。