margin

概要

要素の外側の余白を制御する最も基本的なレイアウトプロパティです。上下左右のマージンを一括または個別に設定でき、要素間の間隔やページ内の配置を調整します。margin: autoは要素の中央揃えに広く使用されます。マージンの相殺（margin collapsing）の仕組みを理解することが重要です。

対応ブラウザ

基本構文

.container {
  margin: 0 auto;
}
.card {
  margin: 16px;
}
.section {
  margin-block: 2rem;
}

実務での使いどころ

• 要素間の間隔と中央揃え

  margin: 0 autoでブロック要素を水平中央に配置し、margin-blockで上下の間隔を統一的に管理します。

注意点

アクセシビリティ

• 適切なマージンによる余白の確保は、コンテンツの視認性と認知のしやすさに貢献します。クリック可能な要素間に十分な間隔を設けてください。

参考リンク

• MDN Web Docs — margin