双方のコンテンツボックスはマージンの値だけ距離を保つ
その際にお互いのマージンの値は相殺され最大値になる
仮にAコンテンツボックスのmargin:10pxでBコンテンツボックスのmargin:8pxの場合双方の間のマージンは10pxになる、合計の18pxにならないので注意が必要です
これは、双方のmarginの最大値が採用されるためです
だがどちらかのmarginの値が負の場合には、合算された結果がマージンの値となる
仮にmargin:10pxとmargin:-10pxの場合は、合算された結果の0pxがマージンサイズとなります
なぜこのようなルールに成っているのでしょうか？
調べてみましたが、現時点では答えを見出すことが出来ませんでした
そこで、自分なりに考えてみました
Aは他のコンテンツの間に10px欲しいとしている、Bも他のコンテンツからの間を10px欲しいとしている時に、合計の20pxでは双方の空間10pxを超えてしまっている
それでは相殺して10pxでいいよね、と言う感じではないのでしょうか
CSSで記述する場合も、pセレクタ に対してmarginのtop、bottomに10pxを設定で文章は整う
コメント