[CSS]異なる文字サイズが存在した場合に行間を指定しても文字が詰まる状態を解除する方法

本文中に異なる文字サイズを混在させることもHTMLコーディングにおいて、ときどきありますが、その際にデザイン上、行間の指定もあわせて行いたいときがあると思います。

そのとき、行高を指定する「line-height」プロパティに単位を付けると行間が詰まるので注意が必要です。

「line-height」プロパティに単位をつけないようにする

たとえば、本文中に「strong」要素を入れ、この文字を他と比べて大きくしたようなケース。

今回のHTML

HTMLソースは下記。

<p class="test">テストです。テストです。<strong>強調です。</strong>テストです。テストです。</p>

p要素内に「strong」要素を入れて、この文字を大きくします。

ダメなCSS

行間が詰まって、文字が重なってしまうダメなCSSは下記です。

p.test {
 font-size: 12px;
 line-height: 1em; //行高を「単位em」を添えて指定
}
p.test strong {
 font-size: 24px;
}

これだと、強調文字(strong要素)にも、親要素(p.test)の「line-height」の値=12pxがあたってしまうので、文字が重なって見える。

行間が詰まらないCSS

解消するために、親要素に与えた「line-height」の値の"単位"指定を外してあげればOKです。

具体的なCSSは下記。

p.test {
 font-size: 12px;
 line-height: 1; //行高を「単位」を外して指定
}

これでOKと。

関連するWeb制作・開発Tips

関連リンク