テキスト・フォント

「line-height」プロパティ

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

「line-height」プロパティの値

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

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

「line-height」プロパティの指定方法

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

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