CSSで余白を変更する

1. padding と margin の違い

• padding：枠の内側の余白
• margin：枠の外側の余白
• gap：GridやFlexで並べた要素同士の間隔

2. セクション上下の余白を変更する

Template 001では、各大きなセクションに100pxの余白があります。

.section {
  padding: 100px 0;
}

少しコンパクトにするなら 80px 0 に変更します。最初の数字が上下、2つ目の数字が左右です。

.section {
  padding: 80px 0;
}

3. カード内側の余白を変更する

.service-card {
  padding: 34px;
}

34px → 26px にすると情報量を詰めやすくなります。反対に40px前後にすると、ゆったりした高級感を出しやすくなります。

4. カード同士の間隔は gap

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

gap: 18px; を gap: 28px; にするとカード同士の間隔が広がります。

5. 4方向を別々に指定する方法

.box {
  padding: 20px 30px 40px 50px;
}

順番は 上 → 右 → 下 → 左 です。ただし初心者のうちは、上下左右を同じ値にするか、30px 20px の2値指定から始めると分かりやすいです。

6. 余白変更後のチェック

• 文章と枠線が近すぎない
• 見出しと本文の関係が分かる
• カード同士がくっついて見えない
• スマホで余白が大きすぎない
• ページ全体で余白のルールが揃っている