【コーディング備忘録】改行タグ＜br＞に余白を指定する方法

文章を改行する際に使用する＜br＞タグですが、文章の余白を調整するのにも便利だったりします。

今回は、長文を読みやすくするために行間や段落間の余白を空けたい時に有効な＜br＞の活用法を解説したいと思います。

文章のサンプルを用意してみました。文末に<br>を置いて、改行している状態です。

この<br>に対してマージンをかけて行間の余白を作っていくのですが、マージンだけだと上手く反映されません。

br {
　display: block;
　content: “”;
　margin-bottom: 20px;
}

このように、display: blockとcontent: “”もセットで指定してあげます。

すると、この通り<br>の下に20px分の余白を設けることができました。

行間の調整には通常line-heightを使いますが、段落間で1行程度の間隔を空けるのに「<br>にマージンが付けられたらなー」と思い見つけた方法なのでした。ぜひお試しあれ〜。