父块状元素和子块状元素之间也会重叠。给重叠的margin之间添加内容(padding、border)可以消除叠加效果
浮动盒子、绝对定位盒子、内联块盒子、根盒子的边界不重叠,与他们的子元素之间的边界也不会重叠;——Block Formatting Context(可视化格式模型,根盒子不在里面)可以阻止边距折叠
overflow属性不等于visible的元素与它的子元素之间边界不发生重叠;
对触发了hasLayout(ie6:* display: inline-block; * height: (任何值除了auto); * float: (left 或 right); * position: absolute; * width: (任何值除了auto); * writing-mode: tb-rl; * zoom: (除 normal 外任意值)。IE7 : * min-height: (任意值) * max-height: (除 none 外任意值) * min-width: (任意值) * max-width: (除 none 外任意值) * overflow: (除 visible 外任意值) * overflow-x: (除 visible 外任意值) * overflow-y: (除 visible 外任意值) * position: fixed)的元素,会阻止margin折叠
元素 | margin效应 |
---|---|
内联元素 |
竖直方向的边距被忽略 水平外边距让元素偏离原来的位置 |
静态内联-块状元素 | 静态块状元素 |
浏览器会抵消临近块状元素的上下边距 对于静态块状元素来说,auto会增大外边距,这与0是不相等的 对设定了尺寸的块状元素来说,正/负的margin-left/right都会让元素偏离原来的位置,正的margin-top/bottom会把临近的块状元素挤远,负值会把它们拉近 同样实现拉伸效果的{width:100%},正的外边距会令其右侧溢出容器负值会令其左侧溢出 |
浮动元素 | 正的margin会令它偏离原本的排列位置,负值则正好相反。对于被拉伸的元素来说,它的外边距不会令其缩进,而是溢出父容器。 |
表格元素 | 正的margin会令它偏离原本的排列位置,负值则正好相反。对于被拉伸的元素来说,它的外边距不会令其缩进,而是溢出父容器。 |
绝对定位 |
margin为正值时会把绝对盒模型向容器中间推移 反之会使绝对盒模型远离容器中心 |
负值则正好相反