CSSで改行（brタグ）の高さを設定する方法！ marginやpadding, heightで指定する

改行（ タグ）に対して高さを変更したい（高さを設定したい）という場合があります。

たとえば、サイトタイトルやブログの記事のタイトルに改行を使い、実際の表示ではその改行に高さを設定して見やすくする、みたいな使い方がありますね。

ここではその  タグに高さを設定する方法をみてみますが、spanタグなどに置き換えるのが良いようです。

Contents

例文に対して検証
１）light-height を使う場合（NG例）
２） に高さを設定（margin, padding）
1. 2-1）margin を使ってみる
2. 2-2）padding でも確認してみる
３） に高さを設定（height）
４）で置き換える
ポイント

例文に対して検証

ではまず例として、以下のような改行を含む文があるとします。

CSSの設定法！（ここで改行）
改行に高さを指定する方法は簡単か？

※）分かりやすいように line-heightは1 にしてます。

HTML的には、以下のようになりますね。

<p>CSSの設定法！<br>改行に高さを指定する方法は簡単か？</p>

この に高さを指定したい！という場合、
以下の4つぐらいが考えられます。

１）br に対して line-height を使う（行の高さを指定）
２）br に対して margin, padding を指定する（brタグの余白を指定）
３）br に対して height を指定する（br の高さを指定）
４）br を 別タグ（span）で置き換える（spanで高さ指定）

結論としては１の「line-height」は思い通りの結果になりません。

２、３の方法は、実は何年か前ではCSSの指定で実現可能ではあったものの、現在のブラウザでは反映されなくなったようです。

もっともスマートで、保守性（後からの修正のしやすさ）が高いのが ４の「別タグ（spanなど）に置き換える」、または pタグなどのマージンで調整する 方法です。

１から順に見ていきますが、
明らかにNGな例は見なくて良い場合には、４をチェックしてみてください。

１）light-height を使う場合（NG例）

brタグに高さを設定しようと、
単純に「line-height を使って行の高さを指定する」ことが考えられます。

この場合、改行した部分だけでなく、その行全体の高さが変わってしまうため、意図しない大きな余白が生まれてしまいます。

分かりやすいようにちょっと極端ですが、
line-height:100px;と指定したとすると、イメージ的には以下のようになりますね。

これだと上下にマイナスマージンを指定したりして、ちょっと面倒になりますね。

（ということで、line-heightを使うのはNG）

２） に高さを設定（margin, padding）

そこでbrタグに直接高さを持たせられるように、
ちょっとした「おまじない」をするとmarginやpaddingで上手くいくように見えます。

本来、  はインライン要素なので上下のmarginやpaddingは効きませんが、CSSで「ブロック要素」のように扱うおまじないをかけると、少し前のブラウザでは余白を設定できるようになりました。

でも現在は「br の高さは変わらない」、と、ブラウザの方の制限が優っているようです。

2-1）margin を使ってみる

まずmargin ですが、 に対して以下のCSSを設定します。

CSS

br {
	display: block;
	content: "";
	margin: 10px 0;
}

Jin Simple Code Block

display: block;
- 高さやマージンを指定できるように、ブロック要素に変更。
content: "";
- display:block; を追加しただけでは br タグは高さを持てないので、contentプロパティで空のコンテンツを入れる
  （本来の使い方とはちょっと違う感じですが、おまじない、というところ）
margin: 10px 0;
- 改行の上下に 10px のマージン（余白）を持たせる場合の設定。

このCSSを設定するとイメージ的には以下のようになります。

brタグの上下に10pxずつマージンを設けているのに結果として改行の高さがなぜ10pxになるかと言えば、brタグはcontent=""で「空の要素」だから。

空の要素なので結果としてmargin-top, margin-bottomは隣接するmarginとなり、marginの仕様通り1つが打ち消される、ということになりそうです。

以前はこれで実現できたんですが、
実際CSSを適用してみた例を以下みてみると、高さは反映されません。

分かりやすいよう、以降の例はすべて
CSS適用前はfont-size:20px、line-height:1にしてます。

コード反映前

CSSの設定法！
改行に高さを指定する方法は簡単か？

以下がmargin反映後。

コード反映例 ②-1 margin

CSSの設定法！
改行に高さを指定する方法は簡単か？

グーグルクローム、エッジで確認してますが、
行間（つまり改行の高さ）の変化はないようですね。．．．

2-2）padding でも確認してみる

上の例では改行 タグに対して margin を指定してますが、代わりにpadding を使る、ということが考えられます。

CSS

br {
	display: block;
	content: "";
	padding: 10px 0;
}

Jin Simple Code Block

padding の場合はマージンの相殺が起きないため、
上下に10pxずつ、合計20px分の高さがしっかりと確保されることを期待しましたが．．．

実際コードの反映例をみると、
何年か前は高さが反映されましたが、こちらも現在はダメなようですね。

コード反映例 ②-2 padding

CSSの設定法！
改行に高さを指定する方法は簡単か？

３） に高さを設定（height）

br に高さを指定する、ということで、
margin やpadding の代わりに分かりやすくheight を使うことも考えられます。

CSS

br {
    display: block;
    content: "";
    height: 10px;
}

Jin Simple Code Block

このCSSを設定するとイメージ的には以下のようになりますね。

実際にコードを反映してみた例が以下ですが、
こちらも現在のブラウザでは何も変化しないようです。

コード反映例 ③ height

CSSの設定法！
改行に高さを指定する方法は簡単か？

４）で置き換える

ここまで見た「marginやpadding, heightでbrタグの高さを設定してみる」は、最新のブラウザでは高さは変わりませんでし。

（一部 Firefoxでは変わるようですが、特定のブラウザだけ対応できても意味はないですよね）

ということから、最初から「余白を作るための専用のタグ」として、他のタグに置き換えて表現するのが最も綺麗で確実な方法となります。

そもそも タグに高さを持たせるのはイレギュラーな使い方、ということから、
「それなら他のタグに置き換えてみては？」という考え方。

HTML

<p>CSSの設定法！<span class="spacer"></span>改行に高さを指定する方法は簡単か？</p>

Jin Simple Code Block

このように タグの代わりに
と空のタグを使ってみる。

タグはインライン要素なのでdisplay:block;とブロックに設定して高さを指定すれば、何かとても普通な感じですよね。

CSS

.spacer {
  display: block;
  height: 10px;
}

Jin Simple Code Block

こんな感じでCSSを設定してみると、以下になります。

コード反映例 ④ span

CSSの設定法！改行に高さを指定する方法は簡単か？

はもともと汎用的なインライン要素なので、CSSで display: block; に変更して height や margin を持たせる使い方は、Webの仕組みとして自然です。

この方法であれば、どのブラウザで見ても100%同じ見た目になりますし、数年後にブラウザの仕様が変わっても表示が崩れる心配がないのが良いですね。

●補足：文章を分けるなら「段落（pタグ）」で分ける：
もし、単なるデザインとしての隙間ではなく「文章の意味の区切り」としてスペースを空けたい場合は、1つのpタグの中で無理に改行するのではなく、複数のタグに分割し、CSSで p { margin-bottom: 20px; } のように段落の下マージンを設定するのが、SEOの観点（正しいHTML構造）からも一番のおすすめ。