STEP A：margin・paddingが効かない

visibility_off現象

• 要素に margin や padding を指定しても、スペースが空かない・広がらない
• レイアウトが詰まって見え、思った余白が確保できない

---

help_outline原因

インライン要素のまま使っている

display: inline の要素には、仕様上、上下の余白（margin-top/bottom）が正しく反映されません。

親要素に overflow: hidden が指定されている

overflow: hidden は、親要素の範囲からはみ出した子要素やその余白を「隠す（切り取る）」設定です。そのため、余白も「はみ出した部分」として扱われ、見えなくなってしまいます。

box-sizing が content-box のまま

デフォルトの状態では、要素の幅（width）にpaddingやborderの大きさが加算されてしまいます。そのため、意図したレイアウトや余白にならないことがあります。

---

build対策・コード例

要素をブロック要素にする

.element {
  display: block;
  margin: 16px 0;   /* 上下に16pxの余白 */
  padding: 12px;    /* 内側に12pxの余白 */
}

全体に box-sizing: border-box を適用する

この指定をCSSの冒頭に入れておくのが一般的です。これにより、paddingやborderが幅の内側で計算されるようになり、レイアウトが非常に扱いやすくなります。

*,
*::before,
*::after {
  box-sizing: border-box;
}

親要素の overflow 設定を見直す

もし意図しない指定であれば、overflow: visible;（デフォルト値）に戻すことで、余白が表示されるようになります。

.container {
  overflow: visible;  /* はみ出しを隠さず、余白を確保 */
}

---

bug_reportデバッグ方法

開発者ツール（F12キー）で要素を選択し、「Computed」または「計算済み」パネルを見ると、実際に適用されている余白（margin/padding）を視覚的に確認できます。

また、一時的にアウトラインや背景色を付けて、要素の範囲そのものを可視化するのも有効な手段です。

.element {
  outline: 1px solid red;
  background-color: rgba(255,0,0,0.1);
}

---

school応用ポイント

マージンの相殺（Margin Collapse）

隣り合うブロック要素の上下のmarginは、大きい方の値だけが適用される（重なって相殺される）というCSSの仕様です。特に、親要素と最初の子要素の間でもこの現象が起こるため、「子要素の margin-top が効かない」と感じることがあります。

対策例：

.parent {
  padding-top: 1px;  /* 親要素に僅かなpaddingやborderを入れると相殺を防げる */
  margin-top: 0;
}

代替テクニック：gap プロパティを使う

Flexbox や Grid のコンテナでは、子要素同士の間隔を margin ではなく gap で指定すると、マージン相殺の影響を受けずに安定した余白が取れます。

.flex-container {
  display: flex;
  gap: 16px;  /* 子要素間に均等な16pxの余白 */
}

---

---