問題
親要素A
親要素B
- 子要素C
のような状態の時に
親要素Aにmargin-bottom:15px;
子要素Cにmargin-top :15px;
にした時
自分のイメージでは
AB間15px,BC間15px
よってAC間は30px
でしたが全然そうはならず、頭がこんがらがったので各要素にborder:solid 2pxを指定して一個ずつの関係を視覚的に確認してみましたところ、逆に自分のイメージ通りになってしまいました。
結論
どゆこと？？と思ったのですが、結論から言うと borderやpaddingの有無で場合によって親要素を無視 するようになってるみたいです。
親要素Bの条件によって変わる
Bにpaddingまたはborderが付与されている場合
AC間30px
付与されていない場合
AC間15px
理由
marginは〇〇px距離を取るという意味ではなく、 二つの要素の最低距離 の指定なため、
margin-bottom：２０pxを指定した要素の下にある要素にmargin-top:30pxがあった場合
足し算ではなく、margin-bottom:20px＝最低でも20pxは離れてね。
margin-top:30px=最低でも30pxは離れてね。
という意味になり、両方を満たす２つの間のmarginは30pxになる
先ほどの話に戻ると以上の内容を知っても
BC間は30pxじゃないの？と思ったのですが、もっと細かく分解すると
BにpaddingがないということはBは子要素Cとの間にB側からの距離の指定はないということになります。
Cからのmargin-top:15pxがBを対象にすると思うのですが、その理由はborderとpaddingです
borderは物理的な壁になるためborderがあればそことの距離になります。
paddingはいまいちしっくり来てないのですがborderと同じように扱われるみたいです。