CSSで余白（margin・padding）を調整する基本｜レイアウトが整う書き方

ホームページを作っていると、

こうした悩みはとても多いと思います。

そこでこの記事では、CSS初心者でも分かるように、
marginとpaddingの基本と、レイアウトが整う書き方を解説します。

余白を少し調整するだけで、レイアウトは一気に良くなるので、ぜひ最後までお読みください！

CSSで余白がうまく調整できないよくある原因

まずは、CSSで余白がうまく調整できないよくある原因から見ていきましょう。

marginとpaddingの違いを知らない

どちらも余白ですが、役割が違います。

どこに指定すればよいかわからない

あちこちに指定すると、逆に崩れやすくなります。

数字を適当に入れている

大きすぎる数値は、スカスカな印象になります。

marginとpaddingの違いを簡単に説明

次に、marginとpaddingの違いを簡単に説明します。

とてもシンプルに言うと、このような感じです。

• margin → 外側のすき間
• padding → 内側のすき間

文章と文章の間を空けたい → margin
枠の中をゆったりさせたい → padding

この考え方だけ覚えればOKです。

CSSでmarginを指定する基本の書き方

それでは、CSSでmarginを指定する基本の書き方についてお伝えします。

一番よく使うのが、下の余白です。

p {
  margin-bottom: 20px;
}

これで、文章の下にすき間ができます。

なぜ bottom がよいのか

上下の余白がそろいやすく、レイアウトが安定するからです。

CSSでpaddingを指定する基本の書き方

次に、CSSでpaddingを指定する基本の書き方についてお伝えします。

div {
  padding: 15px;
}

これで、枠の中にすき間ができます。

背景色があるボックスでは、とても効果的です。

上下左右をまとめて指定する方法

上下左右をまとめて指定する方法をご紹介します。

まとめて指定すると、コードがすっきりします。

p {
  margin: 20px 10px;
}

数字の意味

• 最初の数字 → 上と下
• 次の数字 → 左と右

この形はとてもよく使います。

よく使う余白調整パターン（実例）

実例として、よく使う余白調整パターンをご紹介します。

文章と文章の間

p {
  margin-bottom: 20px;
}

画像まわり

img {
  margin-bottom: 15px;
}

ボックスデザイン

.box {
  padding: 20px;
  margin-bottom: 30px;
}

内側と外側を分けると、見た目がとても良くなります。

スマホで余白が広すぎる・狭すぎるときの対処法

スマホで余白が広すぎる・狭すぎるときの対処法をご紹介します。

スマホでは、少しコンパクトな余白が見やすいです。

@media screen and (max-width: 768px) {
  p {
    margin-bottom: 15px;
  }
}

パソコンとスマホで、余白を調整できるのがCSSの良いところです。

よくある失敗と直し方

よくある失敗と直し方をお伝えします。

brで無理やり空けている

<br><br>

👉 marginで調整しましょう。

paddingとmarginを逆に使っている

👉 外か内かを意識すると迷いません。

余白が多すぎる

👉 数値を少し小さくして様子を見るのがおすすめです。

初心者向けのおすすめ余白設定（コピペ用）

最後に、初心者向けのおすすめ余白設定をご紹介します。

文章用

p {
  margin-bottom: 20px;
}

ボックス用

.box {
  padding: 20px;
}

スマホ用

@media screen and (max-width: 768px) {
  p {
    margin-bottom: 15px;
  }
}

まとめ

「CSSで余白（margin・padding）を調整する基本｜レイアウトが整う書き方」はいかがでしたでしょうか？

CSSで余白を整えるだけで、ホームページの見た目はとても良くなりますよ。

正直言って私も、marginとpaddingの違いは、あまりよく分かっていませんでした。。

ただ、ホームページでは余白はとても大切です。

余白が狭いと固い印象を与えるホームページになりますし、余白が狭すぎると間の抜けたようなホームページになります。

余白が整うと、文章も画像も一気に読みやすくなるので、ぜひ参考にしてくださいね！