アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js
を試した様子と結果です.

「入れ子の子要素のmarginが親要素からはみ出る」の実験

背景のグリッドは、灰色が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