プログラミング記事:第八回
PADDINGとMARGIN
ボックス間の激しい戦い!

どうもっす!NISO su! 今日は戦争の話をしようとおもいます。

”えっ、プログラミング記事なのに戦争ですか?”疑問を抱いてるあなた。そうです。戦争です。このCSSの関ケ原では、div a軍のmargin部隊とdiv b軍のmargin部隊の相殺が行われてます。

“さー出陣じゃん!”

はい、交戦の経緯を説明します。

そのためにまずdivの構造を説明します。

一つのdiv(枠)の中にpadding,border, marginがあります。

paddingは内部から拡大し、border内の領域を統括する中央軍であります。

borderは国の城壁となり、marginはdivの外層にある、領土拡大ための辺境軍です。

進撃の巨人の世界観だったら、paddingは憲兵団で、marginは調査兵団ですね。

分かりやすい例を挙げます。backgroundイメージが設定されてあるdivでは、paddingを変えたら、中央部から拡大するため、画像のサイズも変わります。それに対して、marginはどう変えても画像のサイズは変わりません。外層から拡大してるからです。

そして、その領土拡大するときに、もし他のdivも拡大中だったら、戦が発生します。

この勢力図見てください、一見とても平和な光景ですが、実際青い軍のmargin-bottomと赤い軍のmargin-topの間に戦が発生してます。

見た通りabcもabc1もmargin5remに設定しており、両方の距離は10remがあるはずだったが、相殺のため、結果5remしかないです。

両方とも同じ策、装備をつかってるので、勝負はサイズで決まります。今回は両方とも5remのため、引き分けになります。しかし、もし一つの勢力が拡大したら。。

青国は城壁まで攻められちゃいます。

 

”そんな、共存する道がないというのか!!?”

と嘆くあなた。。。

 

二つの道があります。

分かりやすいために、一つのdivにしかmarginbottomかtopをつけないことです。領土は譲りますが、あとで修正するときは見やすいです。(我々は世界(サイト)の神だから、人間の戦に干渉しませんw)

もう一つはもう一つの親divをつくってpaddingで拡大します。そしたら、分離されているので、両方の領土も確保できます!(でもちょっとめんどくさいw)

 

以上!このCSSの関ヶ原合戦での天下統一に巡り合う激しい戦でござるあり!