Web制作実験「入れ子の、親子同士や上下間のmarginの相殺」の実験
- 親要素＝parent＝薄い色
- 子要素＝child＝濃い色
以下、数値はmarginを表します。背景のグリッドは、灰色が25px、黒が50pxの正方形です。
入れ子の、親子同士でのmarginの相殺
上の親要素のmargin大
上の親の下:100px、上の子の下:50px（下の親子共上なし）
boxAp/Ac
boxBp/Bc
上の子要素のmargin大
上の親の下:50px、上の子の下:100px（下の親子共上なし）
boxAp/Ac
boxBpt/Bc
入れ子の、上下間のmarginの相殺
上の親要素のmargin大
上の親の下:100px、上の子の下:50px、下の親の上:25px、下の子の上:75px
boxAp/Ac
boxBp/Bc
上の子要素のmargin大
上の親の下:25px、上の子の下:100px、下の親の上:25px、下の子の上:50px
boxAp/Ac
boxBp/Bc
下の子要素のmargin大
上の親の下:25px、上の子の下:50px、下の親の上:25px、下の子の上:100px
boxAp/Ac
boxBp/Bc