brタグで改行すると行間が何故か広くなってしまい、pタグのline-heightでも調節できない時の原因と対処法

brで改行した時に何故か行間が広くなってしまい、cssでline-heightとかで調節してもうまくいかない時、ありませんか？

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

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

その場しのぎとして、brタグでは改行せずにpタグを分けたり、spanタグをblock要素にして開業させたりと、無理やり調節していたのですが、
先日、原因と調節方法が判明したので、メモしておきます。

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

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

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

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

サイトごとに、ベースとなる行間を上記のように*で調節していたんです。

h1~h6,div,li,th,td,p,a,span...と、line-heightに関係するタグを考えて書き出すのが面倒だったので、*を使用して横着な書き方をしていました。

実はこれによって、brタグ自体にもline-heightが指定されてしまっていたのです。これに気づいた時、brタグにline-heightが有効なことすら知らなかった私は目から鱗でした。というか、brタグにスタイルを当てるという発想自体がありませんでした。

brタグ自体に例えばline-height:2がかかっていたとすると、pタグをline-height:1にしたところで、brタグ自体が高さを持ってしまったような状態になり表題のような、行間がなぜか詰まってくれないという現象がおきたのです。

解決策：brタグのline-heightを初期化する

もし、サイト制作がある程度進んでしまっている状態の場合、今更リセットcssを変更すると他のところへ影響が出てしまうかもしれません。

なので、表題のような問題がおきている箇所のbrタグに関してのみ、line-heightを初期化するという解決策があります。

改行を調整したいとあるpタグの中のbrタグだけ、行間を初期化

p.example br{
  line-height: initial;
}

リセットcssの書き方を変更する

もし、私と同じように*を使ってリセットスタイルを指定している場合、これからは次にように書き換えましょう。

:not(br)を使う

*:not(br){
  line-height: 2;
  /* ...その他リセット項目... */
}

こうすると、「brタグ以外の全てのタグ」にcssが適用されます。

おわりに

「brタグにCSSを指定する、指定することができる」という、ただその発想が出てこなかったために、苦戦していました。

このような状態に陥る方はほとんどいないと思いますが、もし表題の件で悩んでいる人がいらっしゃれば、参考になれば幸いです。