目次
はじめに：改行と余白が思った通りにならない理由
HTMLを書いていると、
- 改行すると余白が広くなりすぎる
- brを入れたら行間が詰まりすぎた
- pタグを使うと勝手に余白が入る
といった 改行・余白の違和感に必ず直面します。
これはバグではなく、
HTMLとCSSの役割を正しく理解していないことが原因です。
この記事では、
HTML初心者がつまずきやすい
改行と余白の正しい調整方法を基礎から丁寧に解説します。
HTMLにおける「改行」と「余白」の考え方
まず重要なのは、次の違いです。
- 改行：文章を次の行に送ること
- 余白：行や要素の間に空間を作ること
HTMLでは、この2つは 別物 として扱います。
brタグによる改行の特徴
<br> は 強制的に改行するためのタグです。
<p>文章1<br>文章2</p>brの特徴
- 行は変わるが、余白はほぼ増えない
- 文章の途中で改行したい場合に向いている
- レイアウト調整目的には不向き
住所や詩など、
意味のある改行にのみ使うのが基本です。
pタグによる改行と余白
<p> タグは 段落を表す要素です。
<p>文章1</p>
<p>文章2</p>ブラウザは、pタグに対して
上下にmargin（余白）を自動で付与します。
pタグの特徴
- 自動的に上下余白が入る
- 文章の区切りに最適
- 余白が広すぎると感じることが多い
余白が広すぎる原因はCSSのmargin
pタグの余白が広い理由は、
ブラウザの デフォルトCSS にあります。
p {
margin-top: 1em;
margin-bottom: 1em;
}この余白は CSSで自由に調整可能です。
余白を調整する例
p {
margin: 8px 0;
}これだけで、
文章間の余白をスッキリ整えることができます。
brで余白調整してはいけない理由
初心者がやりがちなのが、
余白を作るために br を連続で使う方法です。
文章1<br><br><br>文章2この方法は、
- レイアウトが崩れやすい
- スマホ表示で不安定
- 保守性が悪い
というデメリットがあります。
正解はCSSで余白を作る
<p class="text">文章1</p>
<p class="text">文章2</p>.text {
margin-bottom: 16px;
}行間を調整したい場合はline-height
改行ではなく、
文字と文字の間隔を調整したい場合は
line-height を使用します。
p {
line-height: 1.8;
}これにより、
- 読みやすさが向上
- 見た目が整う
といった効果があります。
よくある失敗パターン
初心者によくある失敗を整理します。
- 改行したいのにmarginをいじっている
- 余白を作りたいのにbrを使っている
- pタグの余白が原因だと気づいていない
これらは
役割の混同 が原因です。
改行と余白の正しい使い分け
迷ったら、次の基準で判断しましょう。
- 行を変えたいだけ → br
- 文章を区切りたい → p
- 空間を調整したい → CSS（margin / padding）
- 行間を調整したい → line-height
この考え方が身につくと、
HTMLとCSSの理解が一気に深まります。
まとめ：HTMLとCSSは役割分担が重要
HTMLは 構造を作るもの、
CSSは 見た目を整えるもの です。
- 改行はHTML
- 余白はCSS
- 見た目調整はCSS
この基本を押さえるだけで、
「改行・余白がうまくいかない問題」はほぼ解決します。
初心者のうちは戸惑いがちですが、
正しい考え方を覚えれば、
レイアウト調整はぐっと楽になります。
ぜひ実際のコードで試してみてください。