CSSマージンとパディング

<style>
.box {
  padding: 20px;  /* 上下左右すべて20px */
  background: #fff3e0;
  border: 1px solid #ffb74d;
}
</style>
<div class="box">20pxのパディングがコンテンツとボーダーの間にスペースを作成</div>

<style>
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  background: #fce4ec;
  border: 1px solid #e91e63;
}
</style>
<div class="box">異なるパディング：上10px、右20px、下30px、左40px</div>

/* 1つの値：すべての側が等しい */
padding: 20px;

/* 2つの値：上+下、左+右 */
padding: 10px 20px;

/* 3つの値：上、左+右、下 */
padding: 10px 20px 30px;

/* 4つの値：上、右、下、左（時計回り） */
padding: 10px 20px 30px 40px;

<style>
/* ボタンにパディングを追加してクリックしやすくする */
.button {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
}

/* カードコンテンツの余白 */
.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

/* ナビゲーションアイテムのタップエリア */
.nav-item {
  padding: 10px 16px;
  background: #e8eaf6;
  display: inline-block;
}
</style>
<button class="button">ボタン</button>
<div class="card">ボーダーから快適な余白を持つカードコンテンツ</div>
<nav class="nav-item">ナビゲーションアイテム</nav>

<style>
.box {
  margin: 20px;  /* 上下左右すべて20px */
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  padding: 10px;
}
</style>
<div class="box">20pxのマージンが他の要素から20pxの間隔を維持</div>

margin: 20px;            /* すべての側が等しい */
margin: 10px 20px;       /* 上+下、左+右 */
margin: 10px 20px 30px;  /* 上、左+右、下 */
margin: 10px 20px 30px 40px; /* 上、右、下、左 */

<style>
/* コンテナを中央揃え */
.container {
  width: 1200px;
  margin: 0 auto;   /* 水平中央 */
  background: #e3f2fd;
  padding: 10px;
}

/* 要素間の余白 */
.box {
  margin-bottom: 20px;
}

/* 見出しの下のスペース */
h1 {
  margin-bottom: 16px;
}
</style>
<div class="container">子要素を含むコンテナ要素</div>
<div class="box">ボックスモデルのスタイリングを示すボックス要素</div>
<h1>見出し1</h1>

<style>
.box {
  width: 400px;      /* 幅を指定する必要がある */
  margin: 0 auto;    /* 水平中央 */
}
</style>
<div class="box">ボックスモデルのスタイリングを示すボックス要素</div>

<style>
.box1 {
  margin-bottom: 30px;
}
.box2 {
  margin-top: 20px;
}
/* 実際の間隔は30px（大きい方の値）、50pxではない */
</style>
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>

<style>
.parent {
  background: #eee;
  /* パディングやボーダーなし */
}
.child {
  margin-top: 20px;  /* このマージンで親も「落下」する */
}
</style>
<div class="parent">親コンテナ</div>
<div class="child">子コンテンツ</div>