「入れ子の子要素のmarginが親要素からはみ出る」の実験
- 親要素=parent=薄い色
- 子要素=child=濃い色
背景のグリッドは、灰色が25px、黒が50pxの正方形です。全て、上の子要素 boxA-child(図のboxAc)はmargin-bottom:50pxです。
基本形
上の親要素(boxA-parent)にborderなし、paddingなし、heightなし
boxAp/Ac
boxB
borderあり
上の親要素(boxAp)の下にborder:25px。paddingなし、heightなし、floatなし。
boxAp/Ac
boxB
paddingあり
上の親要素(boxAp)の下にpadding:25px。borderなし、heightなし、floatなし。
boxAp/Ac
boxB
heightあり
上の親要素(boxAp)にheight:125px。borderなし、paddingなし、floatなし。
boxAp/Ac
boxB
floatの場合
上の親要素(boxAp)と下要素(boxB)にfloat。borderなし、paddingなし。
boxAp/Ac
boxB