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

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

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

例文に対して検証

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

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

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

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

• １）単純に line-height を使う（行の高さを指定）
• ２）br に対して margin, padding を指定する（br タグの余白を指定）
• ３）br に対して height を指定する（br の高さを指定）

ではまず line-height を使うとどうなるかから、順にみてみましょう。

light-height を使う場合

brタグに高さを設定しようと、br自体というより単純に line-height を使って行の高さを指定する場合、改行以外のところにも意図しない余白が生まれます。

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

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

<br>に高さを設定

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

margin を使う

まず margin ですが、<br>に対して以下のCSSを設定すればOK.

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

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

padding でも OK

上の例では改行（<br>）に対して margin を指定してますが、margin の代わりに padding を使っても良いですね。

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

height を使ってもOK

br に高さを指定する、ということで、分かりやすく margin や padding の代わりに height を使っても勿論OK。

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

ポイント

「content: "";」を使うことで br にも高さが指定できましたが、単純に上の例のCSSを使うと、ヘッダーやフッター、サイドバーなど含めて、すべての箇所の改行（brタグ）に適用されてしまうので、ここには注意ですね。

以下の記事などを参照し、適用箇所の範囲はどこなのかを調べ、その範囲内での適用としていきましょう。

ブログのデザインカスタマイズの決め手！CSSの適用範囲を確認する技

また、ブログで収益化を図りたいがどうすれば良いか分からない、とか、ネットビジネスで収入を上げるための道筋を1つ1つ順に知りたい、という場合には、以下のメルマガにも登録してみてくださいね。