[HTML & CSS General] CSS: margin の相殺
隣接する二つ以上の要素の垂直マージンは、大きい値が優先される。
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (アスキー書籍)
posted with amazlet at 14.10.31
KADOKAWA / アスキー・メディアワークス (2013-07-31)
売り上げランキング: 11,817
売り上げランキング: 11,817
margin-bottom と margin-top のどちらでも指定できる。
隣接する二つのボックス。
この場合 margin の相殺が起こり、値の大きい 48px が優先される。
#box1 {
margin-bottom: 48px; }
#box2 {
margin-top: 24px; }
以下を満たす場合、72px(48px + 24px) の余白となる。
- どちらかの要素に padding が指定されている。
- どちらかの要素に border が指定されている。
#box1 {
padding: 1px;
// border: 1px solid #eeeeee;
margin-bottom: 48px; }
#box2 {
margin-top: 24px; }
こうした複雑な条件を考慮するのは面倒ですので、ブロック要素の垂直方向のマージンは
margin-bottomまたはmargin-topのどちらか1つで調整するように統一しておくと便利です。
※ 大きい値が優先される条件として「どちらの要素も中身が空でないこと」とあったが、具体的にどんな状態を指すのか分からなかった。
補遺
magin 難しい。
こちらとか、何度も見ているけれど理解し切れていない。。。