メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

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. -

    コメントする

    CAPTCHA


    TOPへ Top