Webデザイナーブログから学ぶホームページ制作

「line-height」プロパティは、行間や文字の高さを指定するCSSプロパティです。
行間や文字の高さは、ブラウザーの標準サイズや親要素との相対的なサイズなどで指定ができます。

行間や文字の高さは「px」「%」「em」「rem」「vw」「vh」などの値を指定することができます。
※主にテキストの行間を指定する場合のみ使用します。

CSSでサイズ指定する単位「px」「%」「em」「rem」の違いと使い分け

行間や文字の高さを指定する場合は、「line-height」プロパティを使い適応する値を指定することで実装できます。

セレクタ{
line-height:行間や文字の高さ;
}

/* 基本値 */
line-height: normal;
line-height: 1.0;
line-height: 1.2;
line-height: 1.4;
line-height: 1.6;
line-height: 1.8;
line-height: 2;

/* px値 */
line-height: 14px;
line-height: 16px;
line-height: 18px;
line-height: 20px;

/* %値 */
line-height: 20%;
line-height: 22%;
line-height: 24%;
line-height: 26%;

/* em値 */
line-height: 1.0em;
line-height: 1.2em;
line-height: 1.4em;
line-height: 1.6em;
line-height: 2.0em;