Firefoxでinline-block内のbrをblockにすると変な隙間が入る

2016.03.14

新入社員のyanagimachiです。
変なお菓子を見つけては、周りの人を巻き込んで試食をするのが大好きです！

brを blockにするのはどんなとき？

レスポンシブデザインでPCだと改行あり、スマホだと改行なしなんてときがあります。
いままで、そんなときは以下のようなコードを書いていました。

<p><a href="#">PCだと改行あり、<br class="isSPnone">スマホだと改行なし</a></p>

br.isSPnone {
  display: none;
}

@media only screen and (min-width: 641px) {
  br.isSPnone {
    display: block;
  }
}

たいていは上記の記述で問題ないのですが、「コンテンツの中で中央寄せするけど文字は左寄せがしたい！」なんてときにCSSに以下の記述を追加すると、Firefoxでは改行した上で一行分くらいの隙間が空いてしまいます。

p {
  text-align: center;
}
p a {
  display: inline-block;
  text-align: left;
}

brをinline-blockにすると直るようです。

@media only screen and (min-width: 641px) {
  br.isSPnone {
    display: inline-block;
  }
}