Open uniquejava opened 6 years ago
引子: CSS深入理解：overflow:hidden——溢出,坍塌,清除浮动
原文: Understanding Block Formatting Contexts in CSS 翻译: Understanding Block Formatting Contexts in CSS
Collapsing Margins 这篇信息量好大, 之前没有完全理解margin collapse, 以为margin collapsing只出现在一个div的margin-bottom和另一个div的margin-top之间. 原来并不是这样, mt和mt, mb和mb, mb和mt只要margin在一起,都叫adjoining margins, 都会出现坍塌现象.
即parent和child的margin-top是有重叠产生的, 并且child的margin top从视觉上看起来就是parent的margin-top. 除非给parent加了border/padding或者parent和child之间有任意non-empty content.
最后parent的padding和child的margin不会重叠.
Understanding CSS Layout And The Block Formatting Context
引子: CSS深入理解：overflow:hidden——溢出,坍塌,清除浮动
原文: Understanding Block Formatting Contexts in CSS 翻译: Understanding Block Formatting Contexts in CSS
Collapsing Margins 这篇信息量好大, 之前没有完全理解margin collapse, 以为margin collapsing只出现在一个div的margin-bottom和另一个div的margin-top之间. 原来并不是这样, mt和mt, mb和mb, mb和mt只要margin在一起,都叫adjoining margins, 都会出现坍塌现象.
即parent和child的margin-top是有重叠产生的, 并且child的margin top从视觉上看起来就是parent的margin-top.
除非给parent加了border/padding或者parent和child之间有任意non-empty content.
最后parent的padding和child的margin不会重叠.
Understanding CSS Layout And The Block Formatting Context