谈到margin就不得不提起到css盒模型，盒模型为外边距+边框+内边距+内容区域，这里我们不谈IE下的怪异模式。
margin即是盒模型的外边距，并且透明，分隔开不同的盒模型。
1，margin重叠
margin在块状元素水平方向上是不存在重叠问题的，而在垂直方向上存在重叠问题。
(1)，为什么存在重叠现象？
当多个p标签设置margin:10px，如果不存在margin重叠的话，表现如下:
图一
当存在margin重叠现象时，表现如下:
图二
图一图二可以看出，margin重叠的话，每个p标签之间的间距就会相等，不会存在第一个和最后一个间距过小，看上去不协调的感觉。
(2)，margin重叠的三种情况
第一种，父级与第一个或者最后一个子级元素外边距重叠。
margin-top重叠成立条件
1，父级元素非块级格式化上下文
2，父级元素无border-top属性
3，父级元素无padding-top属性
4，父级元素和第一个子级元素之间有inline分隔
margin-bottom重叠成立条件
1，父级元素非块级格式化上下文
2，父级元素无border-bottom属性
3，父级元素无padding-bottom属性
4，父级元素和第一个子级元素之间有inline分隔
5，父元素无固定的高度设置
第二种，空block元素标签外边距重叠
1，本身没有border属性
2，本身没有padding属性
3，本身内部无inline元素
4，本身没有高度属性
第三种，多个p标签同样的margin值
不需要清除margin重叠的影响
(3)，margin重叠的计算
1，正正取大值
重叠的部分根据最大的值为外边距
2，正负值相加
重叠的部分相加后为外边距
3，负负取最小
重叠的值最小的那个为外边距
2，margin:auto的实用
一个普通块级元素，如div,在不设置宽度的情况下会占据一行，margin在不考虑浏览器的情况下默认可以看做是0，左右均没有空隙，效果很简单，就不上图了。
当对该div定宽的时候，div右侧的空白间距就是margin的auto可支配的宽度，我们暂时称可支配的宽度为W，此时对此div设置margin:auto时，代码如下：
#box{
width: 200px;
margin: auto;
background: #ddd;
}
<div id='box'></div>
效果如下:
图三
从图三可以看出，水平方向上，div已经居中了，可支配的宽度W被平均的分配到左右两侧。
垂直方向上，因为在不给父元素设置高度的情况下，不存在可支配的高度，所以在垂直方向上auto无效。
3，margin无效
(1)，inline元素
内联元素span,i等标签再设置margin-top或者margin-bottom的时候是无效的，没有作用。
(2)，table-cell
在table-cell中我们最好用padding来代替margin。
(3)，绝对定位对立方向
例如：
.box{
position:absolute;
top:10%;
left:20%;
}
对于上面元素，他的margin-bottom和margin-right没有效果，因为.box由于有一个top值，距离下部距离过大，设置margin-bottom过小的话是没有反应的，除非设置很大的值。
(4)，浮动元素
图四
两列布局，左侧图片浮动，右侧普通p标签包裹的文字，我们想让图片和文字之间有间距的，如果p标签margin-left过小的话，右侧就不会移动。
4，margin的单位
margin单位有px,％，当他的单位为％的时候，如
.father{
width:400px;
height:500px;
}
.son{
margin:50%;
}
此时.son相当于
.son{
margin-top:200px;
margin-left:200px;
margin-right:200px;
margin-bottom:200px;
}
简而言之，百分比是以父级元素的宽度的百分比计算的。
当div元素本身是绝对定位时，margin百分比是根据第一个定位祖先元素（relative/absolute/fiexd）的宽度来确定的。
5，margin的实用
(1)，margin和absolute实现居中效果
.father{
position:relative;
width:100%;
height:400px;
}
.son{
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
}
(2)，margin实现增加容器空间
图五
增加ul的样式margin-right: -10px;
图六
图七
如图五，我们让一行li排列，往往都有一个margin值来调整间距，而到了最后一个往往被挤下去，我们可以单独设置最后一个li的margin值来调整。
这里我们可以给父元素一个margin-right:-10px，margin改变容器的占据尺寸(容器宽度不能是定值，否则无效)，这样就会如图七所示。排列到一行了，而不需要单独给最后一个或者第一个单独写margin。
另外，只有当父元素宽度为auto的时候才有效，因为设置固定的宽度值后margin就无法改变容器占据内容了。
(3)，margin实现左右两列等高布局
图八
代码如下：
图九
左右等高布局是用到margin负值和padding来填充margin负值隐藏掉的内容，并且需要左右元素均为浮动。
网友评论