[HTML & CSS General] CSS: margin の相殺

隣接する二つ以上の要素の垂直マージンは、大きい値が優先される。

[markdown]

レスポンシブWebデザイン　マルチデバイス時代のコンセプトとテクニック (アスキー書籍)

posted with amazlet at 14.10.31

KADOKAWA / アスキー・メディアワークス (2013-07-31)
売り上げランキング: 11,817

Amazon.co.jpで詳細を見る

`margin-bottom` と `margin-top` のどちらでも指定できる。
隣接する二つのボックス。
この場合 margin の相殺が起こり、値の大きい 48px が優先される。

“`css
#box1 {
margin-bottom: 48px; }
#box2 {
margin-top: 24px; }
“`

以下を満たす場合、72px(48px + 24px) の余白となる。

– どちらかの要素に padding が指定されている。
– どちらかの要素に border が指定されている。

“`css
#box1 {
padding: 1px;
// border: 1px solid #eeeeee;
margin-bottom: 48px; }
#box2 {
margin-top: 24px; }
“`

> こうした複雑な条件を考慮するのは面倒ですので、ブロック要素の垂直方向のマージンは `margin-bottom` または `margin-top` のどちらか1つで調整するように統一しておくと便利です。

※ 大きい値が優先される条件として「どちらの要素も中身が空でないこと」とあったが、具体的にどんな状態を指すのか分からなかった。

## 補遺

magin 難しい。
こちらとか、何度も見ているけれど理解し切れていない。。。

> [CSS： marginの正しい理解 (CSSのmarginが難しい)｜Web Design KOJIKA17](http://kojika17.com/2012/08/margin-of-css.html)
[/markdown]