CSSを書いていて、

「span に line-height を指定したのに、思ったように行間が詰まらない……」

ということはありませんか？

特に、p タグの中に小さい文字を入れて、その部分だけ文字サイズや行間を変更したいときに、この問題に遭遇することがあります。

今回は、span の line-height が思ったように効かないときの原因と対処法を紹介します。

span にline-heightを指定したのに効かない？

例えば、次のようなHTMLがあるとします。

<p>
  <span>小さい文字<br />小さい文字</span><br />通常の文字
</p>

通常の文字よりも小さい文字にしたいため、span に font-size と line-height を指定します。

p {
  font-size: 30px;
  line-height: 1.5;
}

span {
  font-size: 18px;
  line-height: 1;
}

ところが、実際に表示してみると、

「line-height: 1 にしたのに、思ったほど行間が詰まらない」

ということがあります。

原因はspanがインライン要素だから

span はデフォルトではインライン要素です。

span のようなインライン要素は、文章の一部として扱われます。

そのため、親要素である p の行ボックスの中に、span が含まれる形になります。

ここで、line-height: 1;を指定しても、span の行間を自由に調整できるわけではありません。

特に、親の文字サイズやline-heightとの組み合わせによって、見た目としては「line-heightが効いていない」ように見えることがあります。

そんなときはdisplay: inline-block;

そこで、span に display: inline-block; を指定してみましょう。

span {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

これだけで、line-heightが効くようになります。

まとめ

span はデフォルトではインライン要素なので、line-height を指定しても、親要素との組み合わせによって「思ったように行間が詰まらない」と感じることがあります。

そんなときは、まず

span {
  display: inline-block;
  line-height: 1;
}

を試してみましょう。