HTML に垂直スペースを挿入する

HTML要素の間に縦方向の余白を作るには、CSSのmarginまたはpaddingを使います。HTMLソースに空行をいくつ並べても、ブラウザーは通常の空白を折りたたむため、安定したレイアウト上のすき間にはなりません。住所のように、内容として改行が必要な場合は<br>を使います。<hr>はテーマの区切りに、<pre>は空白や改行を保持するテキストに使います。

HTMLの<br>要素で垂直方向の余白を挿入する

<br>要素は、同じテキストブロック内で改行します。住所のように各行が意味を持つ内容に適しています。

<p>HubSpot, Inc.<br>35 St. 2<br>California, USA</p>

別々のブロックや、その間のレイアウト上の間隔には、段落を分けるかCSSを使います。内容を下に押し下げるために<br>を繰り返し追加すると、見た目がマークアップに依存し、間隔を一貫して調整しにくくなります。

CSSのマージンとパディングで垂直方向の間隔を調整する

レイアウト上の間隔にはCSSを使うと、値を統一し、テキストとは独立して調整できます。マージンは要素の境界線の外側にあり、パディングは境界線と内容の間、つまり内側にあります。既存のCSSボックスモデル図は、これらの層を示しています。

たとえば、各段落の後にすき間を作るには、段落に下マージンを設定します。

p { margin-bottom: 1rem; }

margin-bottomプロパティは、段落の境界線の外側に余白を作ります。ルート要素のフォントサイズに応じて拡大縮小する1remなどの値を選び、周囲のデザインに合わせて調整してください。隣り合う垂直マージンは相殺されることがあるため、2つのブロック間に見える間隔は、マージンの合計ではなく大きい方の値になる場合があります。

余白を要素の内側に保ちたい場合、たとえば背景や境界線をその余白部分まで広げたい場合は、padding-bottomを使います。

p { padding-bottom: 1rem; }

パディングは要素のボックスを広げ、全体のサイズに影響することがあります。対象の要素やコンポーネントに適用し、どちらの間隔指定が適切かを判断するときは、意図する背景や境界線も考慮してください。

マークアップとスタイルをまとめてページを構成することもできます。次のJavaScript例は、段落間の間隔を統一した小さなHTMLページのソースを出力します。

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    p { margin-bottom: 1rem; }
  </style>
</head>
<body>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</body>
</html>`;
console.log(page);

スクリプトが出力するのはHTMLソースです。そのソースをページとして開くと、ブラウザーがCSSを適用します。テキスト表示だけでは、実際に描画された間隔は確認できません。

CSSクラスで間隔のルールを再利用する

同じ間隔が必要な要素が一部だけなら、すべての段落を変更する代わりに、再利用できるクラスを定義します。

.spacer { margin-bottom: 1rem; }

間隔を付けたい箇所に適用します。たとえば、<p class="spacer">First paragraph.</p><p>Second paragraph.</p>のように記述します。.spacerクラスを使うと値を1つのルールにまとめられるため、対象の間隔をまとめて調整できます。特定のコンポーネント向けのルールであれば、その役割が分かる名前を付けてください。

<hr>と<pre>を本来の用途で使う

<hr>要素は、ページ内の区分の間にあるテーマ上の区切りを表します。ブラウザーでは一般に横線として表示され、既定の間隔はCSSでスタイルを設定できます。空のスペーサーとして使うのではなく、話題や場面が意味のある形で変わる箇所に使います。

<pre>要素は整形済みテキストを表示し、テキスト内容に含まれる空白や改行を保持します。コードなど、書式が重要なテキストに適しています。周囲のHTMLにある空行を、一般的なレイアウト手段として保持するものではありません。<pre>ブロックの周囲に間隔を設けるには、その要素にCSSのマージンまたはパディングを設定してください。