外边距(margin)
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin-top： 上外边距
margin-right: 右外边距
margin-buttom: 下外边距
margin-left: 左外边距
margin: 上外边距 右外边距 下外边距 左外边距
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足两个条件：
1、必须是块级元素。
2、盒子必须指定了宽度（width）
然后就给左右的边距都设置为auto,就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header {width:960px; margin:0 auto;}
清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距。
* {
padding: 0;
margin: 0;
}
注意：行内元素是只有左右内外边距的，是没有上下内外边距的。内边距，在IE6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
解决方案：避免就好了。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
1、可以为父元素定义1像素的上边距或者上内边距
2、可以为父元素添加overflow:hidden;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: green;
}
.margin{
margin-top: 50px;
margin-left: 50px;
}
.center {
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto; /*居中对齐*/
}
.Big {
width: 100px;
height: 100px;
background-color: green;
overflow: hidden; /*解决父元素高度塌陷问题*/
}
.Little {
width: 50px;
height: 50px;
margin: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="Big">
<div class="Little"></div>
</div>
<div class="margin"></div>
<div class="center"></div>
</body>
</html>效果如下：
2862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
