brで改行すると謎のスペースができてしまう件【HTML/CSS】

＊この記事は公開していても、自分用メモです。

<br>はインライン要素なのが理由で、改行すると隙間ができてしまうらしい。

例えば、

<div>一行目の文章</div>
<br>
<div>二行目の文章</div>

としたときに、divタグにfont-sizeを指定すると、
二つのdivの間に自動的にスペースができてしまう。

これを解消するには、brの親要素でfont-sizeをゼロにする。

つまりこういうこと↓

<div class="parent_of_br">
   <div>一行目の文章</div>
   <br>
   <div>二行目の文章</div>
</div>



↑　
.parent_of_br {
    font-size: 0;
}

だが、当然そうすると子要素の「一行目の文章」のfont-sizeもゼロになってしまうので、子要素には別でフォントサイズを20pxとか指定する。

逆に考えれば、文章を改行したときの行間は、親要素のfont-sizeで調整することができる。親要素のfont-sizeを20pxにしたときは…？30pxにしたときは？　と色々いじってみよう。