边距

内联元素

对于内联元素来说,水平外边距让元素偏离原来的位置 负margin会使元素重叠 margin-top和margin-bottom的值是被忽略的

块状元素

浏览器会抵消临近块状元素的上下边距
但并不仅仅是这么简单,css垂直边距margin还有很多特殊的地方:

父块状元素和子块状元素之间也会重叠。给重叠的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折叠

对于静态块状元素来说,auto会增大外边距,这与0是不相等的(可参考绝对定位水平居中)
对设定了尺寸的块状元素来说,正/负的margin-left/right都会让元素偏离原来的位置,正的margin-top/bottom会把临近的块状元素挤远,负值会把它们拉近
对被拉伸(auto)的块状元素来说,正的外边距会令四条边缩进
负值会令它们凸出来
同样实现拉伸效果的{width:100%},正的外边距会令其右侧溢出容器
负值会令其左侧溢出

内联-块状元素

对内联-块状元素来说
1正的margin-top会扩展行高
2负值会缩小行高
3正的margin-bottom会升高元素
4负值会令元素降低

表格

对于被拉伸的表格来说,它的外边距不会令表格缩进,但会令表格溢出。
元素 margin效应
内联元素

竖直方向的边距被忽略

水平外边距让元素偏离原来的位置

静态内联-块状元素
静态块状元素

浏览器会抵消临近块状元素的上下边距

对于静态块状元素来说,auto会增大外边距,这与0是不相等的

对设定了尺寸的块状元素来说,正/负的margin-left/right都会让元素偏离原来的位置,正的margin-top/bottom会把临近的块状元素挤远,负值会把它们拉近

同样实现拉伸效果的{width:100%},正的外边距会令其右侧溢出容器负值会令其左侧溢出

浮动元素 正的margin会令它偏离原本的排列位置,负值则正好相反。对于被拉伸的元素来说,它的外边距不会令其缩进,而是溢出父容器。
表格元素 正的margin会令它偏离原本的排列位置,负值则正好相反。对于被拉伸的元素来说,它的外边距不会令其缩进,而是溢出父容器。
绝对定位

margin为正值时会把绝对盒模型向容器中间推移

反之会使绝对盒模型远离容器中心

浮动

正的margin会令它偏离原本的排列位置
并使其父元素和其他内容与它远离

负值则正好相反

对于被拉伸的浮动元素来说,它的外边距不会令其缩进。而是会溢出父元素

绝对定位

测试
margin调整内盒大小
测试
水平居中