MENU

brで改行した時に行間をうまく調整できないことはありませんか?

pタグにline-heightを指定しても、自動改行ではちゃんと行間が調節されているのにbrタグで改行しているところだけ何故か行間が変わらない…。

そんな現象に悩まさることがちょくちょくありました。

以前までは改行する度にpタグを分けたり、spanタグを挟んだりしてなんとか調節していたのですが、
今回、その原因と調節方法が判明したので、メモしておきます。

 

目次

原因はリセットCSSやノーマライズCSSにあるかも

各種ブラウザによるデフォルトのCSSでデザインが左右されないように、リセットCSSやノーマライズCSSを使用している方は多いかと思います。

私ももちろん使用しているのですが、このリセットCSSをカスタマイズする時に横着をしてしまい、次のような記述をしていました。

*{
  margin: 0;
  padding: 0;
  line-height: 2;
  /*その他リセット項目*/
}

*を使用すると一括で共通してリセットさせたいcssを指定できるので、このように指定していたのですが、この中にline-heightに関する指定もしてあったのです。

こうしてしまうことで、brタグにもline-heightが指定されてしまっていたのです。
それが原因で、pタグのline-heightを上書きして調節してもうまくいかなったわけです。

今ではリセットCSSでの記述に気をつけることで、この現象に悩まされることはなくなりました。

しかし、既存のサイトや制作が進んでいるサイトで今さらリセットCSSを書き換えるのは怖い。という方は次の方法で調節してみてください。

brタグに直接line-heightを指定すると調節できる

問題は一括でline-heightを指定してしまったことでbrタグに行間が発生してしまったことでした。

ですので、さらにCSSを上書きしてあげればいいのです。

br{
  line-height: 1;
}

brタグにCSSを指定するという、ただそれだけのことがなかなか閃かず、苦戦してしまっていたようです。

brタグにクラスを付けて指定してあげることもできますので、一箇所だけbrタグに関する行間を調節したい時はそのようにしてみてください。

もちろん、line-heightでなく様々なCSSを適用することができます。より自由なコーディングライフを送っていきましょう。

- Thank you for reading this to the end. -
TOPへ Top