HTMLで空白行や高さを調整する方法｜見た目を整えるシンプルテクニック

ホームページやブログを作っていて、

「ここにちょっとだけ空白を入れたい」
「見出しと本文の間をあけたい」

と思ったことはありませんか？

HTMLでは単純にEnterキーで改行や空行を入れても、ブラウザには反映されません。これはHTMLの仕様で、複数の空白や改行はまとめてひとつの空白に扱われるからです。

そこでこの記事では、HTMLで空白行や高さを調整するための方法を初心者向けにやさしく紹介します。

これを読めば、行間や間隔を自由にコントロールできるようになりますよ。

HTMLの空白処理について理解しよう
1. HTMLが空白を扱う仕組み
2. なぜこのような仕様になっているの？
空白行を作る基本的な方法
1. <br>タグで改行
2. 複数の段落で空白を作る
より自由に高さを調整する方法
1. 空の<div>に高さを指定
2. CSS Classを使った管理
margin（マージン）を使った間隔調整
padding（パディング）との使い分け
1. marginとpaddingの違い
2. 実際の使い分け例
高度な空白調整テクニック
レスポンシブ対応の空白調整
実用的なデザインパターン
空白調整の注意点とベストプラクティス
よくある問題と解決法
まとめ
1. 手法の使い分け
2. ベストプラクティス

HTMLの空白処理について理解しよう

HTMLが空白を扱う仕組み

HTMLでは、以下のような特徴があります：

<!-- このような書き方をしても... -->
<p>こんにちは


改行を何度しても


ブラウザでは1つのスペースになります</p>

ブラウザでの表示結果：

こんにちは 改行を何度しても ブラウザでは1つのスペースになります

なぜこのような仕様になっているの？

HTMLは「構造」を表現するためのマークアップ言語です。見た目の調整は本来CSSの役割なので、HTMLでは余計な空白を無視するようになっています。

言語	役割
HTML	文書の構造と内容
CSS	見た目やデザイン
JavaScript	動作や機能

空白行を作る基本的な方法

<br>タグで改行

同じ段落内で少し間をあけたいときは<br>（ビーアール）を使います：

<p>こんにちは！<br>改行されます。</p>
<p>複数の改行<br><br>2行分の空きができます。</p>

表示結果：

こんにちは！
改行されます。

複数の改行


2行分の空きができます。

`<br>`のメリット・デメリット

メリット	デメリット
簡単で直感的	高さを細かく調整できない
すぐに効果が見える	メンテナンスが大変
HTMLの基本タグ	レスポンシブ対応が困難

複数の段落で空白を作る

<p>最初の段落です。</p>
<p>&nbsp;</p> <!-- 空の段落 -->
<p>空白をあけた次の段落です。</p>

 は「改行されないスペース」という特殊文字です。

より自由に高さを調整する方法

空の<div>に高さを指定

空白スペースを作りたい場所に<div>を置き、heightをCSSで指定する方法です：

<p>上の文章</p>
<div style="height: 30px;"></div>
<p>下の文章（30px下にずれる）</p>

さまざまな高さの例

<!-- 小さな空白 -->
<div style="height: 10px;"></div>

<!-- 中程度の空白 -->
<div style="height: 30px;"></div>

<!-- 大きな空白 -->
<div style="height: 60px;"></div>

<!-- 画面の高さに対する割合 -->
<div style="height: 5vh;"></div> <!-- 画面の5% -->

CSS Classを使った管理

<style>
.spacer-small { height: 10px; }
.spacer-medium { height: 30px; }
.spacer-large { height: 60px; }
</style>

<p>上の文章</p>
<div class="spacer-medium"></div>
<p>下の文章</p>

この方法なら、後から一括で変更できて便利です。

margin（マージン）を使った間隔調整

基本的なmarginの使い方

空白を作るために最もよく使われるのがCSSのmargin（外側の余白）です：

<!-- 見出しの下に空白 -->
<h2 style="margin-bottom: 40px;">見出し</h2>
<p>本文がここに入ります。</p>

<!-- 段落の上に空白 -->
<p style="margin-top: 20px;">ここから本文</p>

marginの4方向指定

<style>
.content-section {
  margin-top: 20px;    /* 上の余白 */
  margin-right: 15px;  /* 右の余白 */
  margin-bottom: 30px; /* 下の余白 */
  margin-left: 15px;   /* 左の余白 */
}

/* 省略記法 */
.content-section-short {
  margin: 20px 15px 30px 15px; /* 上 右 下 左 */
}

/* さらに省略 */
.content-section-simple {
  margin: 20px 15px; /* 上下20px、左右15px */
}
</style>

marginの実用例

<style>
.article-header {
  margin-bottom: 2rem; /* 見出しの下に空白 */
}

.article-paragraph {
  margin-bottom: 1.5rem; /* 段落間の空白 */
}

.section-separator {
  margin: 3rem 0; /* セクション間の大きな空白 */
}
</style>

<article>
  <h1 class="article-header">記事タイトル</h1>
  <p class="article-paragraph">最初の段落です。</p>
  <p class="article-paragraph">2番目の段落です。</p>
  
  <div class="section-separator"></div>
  
  <h2 class="article-header">次のセクション</h2>
  <p class="article-paragraph">新しいセクションの内容です。</p>
</article>

padding（パディング）との使い分け

marginとpaddingの違い

<style>
.margin-example {
  margin: 20px;
  background-color: lightblue;
}

.padding-example {
  padding: 20px;
  background-color: lightgreen;
}
</style>

<!-- 外側に余白（margin） -->
<div class="margin-example">外側に20pxの余白</div>

<!-- 内側に余白（padding） -->
<div class="padding-example">内側に20pxの余白</div>

プロパティ	効果	使用場面
margin	要素の外側の余白	要素同士の間隔を空ける
padding	要素の内側の余白	要素内のコンテンツとの間隔

実際の使い分け例

<style>
.card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;        /* カード内の余白 */
  margin-bottom: 30px;  /* カード同士の間隔 */
}
</style>

<div class="card">
  <h3>カードタイトル</h3>
  <p>カードの内容です。paddingで内側に余白があります。</p>
</div>

<div class="card">
  <h3>2つ目のカード</h3>
  <p>marginで上のカードとの間隔が空いています。</p>
</div>

高度な空白調整テクニック

line-height（行間）の調整

<style>
.normal-line-height {
  line-height: 1.4; /* 通常の行間 */
}

.loose-line-height {
  line-height: 2.0; /* ゆったりした行間 */
}

.tight-line-height {
  line-height: 1.2; /* 詰まった行間 */
}
</style>

<p class="normal-line-height">
  通常の行間で書かれたテキストです。
  複数行になったときの間隔が標準的です。
</p>

<p class="loose-line-height">
  ゆったりした行間で書かれたテキストです。
  読みやすく、上品な印象を与えます。
</p>

letter-spacing（文字間隔）の調整

<style>
.normal-spacing { letter-spacing: 0; }
.wide-spacing { letter-spacing: 2px; }
.tight-spacing { letter-spacing: -1px; }
</style>

<p class="normal-spacing">通常の文字間隔</p>
<p class="wide-spacing">広い文字間隔</p>
<p class="tight-spacing">狭い文字間隔</p>

word-spacing（単語間隔）の調整

<style>
.wide-word-spacing {
  word-spacing: 5px;
}
</style>

<p class="wide-word-spacing">This is an example of wide word spacing.</p>

レスポンシブ対応の空白調整

画面サイズに応じた余白

<style>
.responsive-spacer {
  height: 20px; /* 基本の高さ */
}

/* タブレット以上 */
@media (min-width: 768px) {
  .responsive-spacer {
    height: 40px;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .responsive-spacer {
    height: 60px;
  }
}
</style>

<p>上の文章</p>
<div class="responsive-spacer"></div>
<p>下の文章（画面サイズで間隔が変わります）</p>

vw・vh・vmin・vmaxを使った調整

<style>
.viewport-spacer {
  height: 5vh;  /* 画面の高さの5% */
  width: 100%;
}

.viewport-margin {
  margin: 2vh 5vw; /* 上下は画面高さの2%、左右は画面幅の5% */
}
</style>

clamp()を使った可変サイズ

<style>
.flexible-spacer {
  height: clamp(20px, 5vw, 80px);
  /* 最小20px、最大80px、基準は画面幅の5% */
}

.flexible-margin {
  margin-bottom: clamp(1rem, 4vw, 3rem);
}
</style>

実用的なデザインパターン

ヒーローセクションの余白

<style>
.hero-section {
  padding: 5rem 0; /* 上下に大きな余白 */
  text-align: center;
  background-color: #f8f9fa;
}

.hero-title {
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  margin-bottom: 2rem;
}
</style>

<section class="hero-section">
  <h1 class="hero-title">メインタイトル</h1>
  <p class="hero-subtitle">サブタイトルです</p>
  <button>ボタン</button>
</section>

記事の読みやすい間隔

<style>
.article {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

.article h1 {
  margin-bottom: 1rem;
  line-height: 1.3;
}

.article h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.article p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.article ul, .article ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.article li {
  margin-bottom: 0.5rem;
}
</style>

カードレイアウトの間隔

<style>
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem; /* カード間の間隔 */
  padding: 2rem;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.card h3 {
  margin-bottom: 1rem;
}

.card p {
  margin-bottom: 0.5rem;
}
</style>

<div class="card-container">
  <div class="card">
    <h3>カード1</h3>
    <p>内容...</p>
  </div>
  <div class="card">
    <h3>カード2</h3>
    <p>内容...</p>
  </div>
</div>

空白調整の注意点とベストプラクティス

<br>の多用は避けよう

悪い例

<!-- このような書き方は避ける -->
<p>ここに<br><br><br><br><br>大量の<br>改行があります。</p>

良い例

<!-- CSSで管理する -->
<style>
.section-break {
  margin-bottom: 3rem;
}
</style>

<p class="section-break">上のセクション</p>
<p>下のセクション</p>

一貫性のある余白システム

<style>
/* 統一された余白システム */
:root {
  --space-xs: 0.5rem;  /* 8px */
  --space-sm: 1rem;    /* 16px */
  --space-md: 1.5rem;  /* 24px */
  --space-lg: 2rem;    /* 32px */
  --space-xl: 3rem;    /* 48px */
}

.margin-sm { margin: var(--space-sm); }
.margin-md { margin: var(--space-md); }
.margin-lg { margin: var(--space-lg); }

.spacer-sm { height: var(--space-sm); }
.spacer-md { height: var(--space-md); }
.spacer-lg { height: var(--space-lg); }
</style>

セマンティックなHTML構造

<!-- 構造的に正しいHTML -->
<main>
  <section class="intro">
    <h1>タイトル</h1>
    <p>導入文</p>
  </section>
  
  <section class="content">
    <h2>コンテンツ見出し</h2>
    <p>本文</p>
  </section>
</main>

<!-- CSSで余白を調整 -->
<style>
section + section {
  margin-top: 3rem; /* セクション間の余白 */
}
</style>

よくある問題と解決法

marginの相殺（margin collapse）

<style>
.box1 {
  margin-bottom: 30px;
  background-color: lightblue;
}

.box2 {
  margin-top: 20px;
  background-color: lightgreen;
}
</style>

<div class="box1">上のボックス（下margin: 30px）</div>
<div class="box2">下のボックス（上margin: 20px）</div>

結果： 間隔は50pxではなく30px（大きい方が採用される）

解決方法

<style>
/* 一方向のmarginのみ使用 */
.box {
  margin-bottom: 30px;
}

/* またはpaddingとの組み合わせ */
.container {
  padding-top: 30px;
}
</style>

スマートフォンでの見た目調整

<style>
.mobile-friendly {
  padding: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .mobile-friendly {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* モバイルでは行間を狭く */
  .mobile-friendly p {
    line-height: 1.5;
  }
}
</style>

印刷時の調整

<style>
@media print {
  .no-print-spacer {
    display: none; /* 印刷時は余白を非表示 */
  }
  
  .print-page-break {
    page-break-before: always; /* 印刷時の改ページ */
  }
}
</style>

まとめ

HTMLで空白行や高さを調整する方法はたくさんありますが、目的に応じて最適な手法を選ぶことが重要です。

手法の使い分け

方法	適用場面	メリット	注意点
`<br>`	詩や住所など、意味のある改行	簡単	多用禁止
`<div style="height">`	一時的な調整	直感的	インライン推奨せず
`margin`	要素間の間隔	標準的	margin相殺に注意
`padding`	要素内の余白	背景色に影響	ボックスサイズに注意
`line-height`	行間調整	読みやすさ向上	単位に注意