✅ marginはtop派？bottom派？セクション余白は統一しよう！

💡 marginの使い方、バラバラになってませんか？

初学者さんのサイトでよく見かけるのが、
セクションごとに margin-top を使ったり、次のセクションに margin-bottom をかけたりして、余白の取り方がバラバラなケースです。

/* sectionAの下に余白 */
.sectionA {
  margin-bottom: 80px;
}

/* sectionBの上に余白 */
.sectionB {
  margin-top: 80px;
}

これ、実は後から調整がめちゃくちゃ大変になる原因です…！

🚨 何が問題なの？

• どこに余白を設定してるか分かりづらくなる
• デザイン調整のときに 一貫性がなく修正しづらい
• marginが**重複（相殺）**して意図しないレイアウトになることも…

✅ 解決法：セクションの余白は「どちらか一方」に統一しよう！

おすすめは → margin-bottomに統一！

.section {
  margin-bottom: 80px;
}

このように「セクションの下にだけ余白を持たせる」ルールにすれば…

• 全体の設計がスッキリする
• デザインに一貫性が出る
• 後からの変更もしやすい！

💡 実際のHTML構造例

<section class="section section-news">
  <h2>お知らせ</h2>
  <!-- コンテンツ -->
</section>

<section class="section section-service">
  <h2>サービス</h2>
  <!-- コンテンツ -->
</section>

.section {
  margin-bottom: 100px;
}

こうすれば 各セクションが下にだけ均等な余白を持つようになります。

✅ ヘッダー直下やフッター前だけ特別な余白が必要な場合は？

/* 最初のセクションだけ上に余白 */
.section:first-of-type {
  margin-top: 120px;
}

/* 最後のセクションだけ下に余白 */
.section:last-of-type {
  margin-bottom: 120px;
}

→ 基本は margin-bottom に統一しつつ、特例だけ個別で上書きするのがベスト！

🎯 おまけ：paddingとの違いにも注意！

• margin：外側の余白（他の要素との距離を調整）
• padding：内側の余白（中のコンテンツとの距離）

セクション間の間隔は margin を使うのが基本です！

📝 まとめ

📣 ちょっとした意識で、全体が整う！

余白の統一は、見た目をキレイにするだけでなく、メンテナンス性の高いコーディングにもつながります。

まずは 1つの方針に決めて統一することから意識してみましょう😊

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです！