css怎么设置margin？本节学习元素的外边距(margin)。margin的语法类似于padding，不同的是，margin在使用的过程中会导致两个问题：父子级之间margin传递;兄弟级之间margin叠压。下面介绍如何避免或解决这两个问题。
1、margin的作用
margin的作用就是调节元素之间的距离。
【例】在页面中创建一个div元素作为容器，给容器添加黑色边框，浏览器显示效果如图1所示。HTML代码如下。
<div class="page"></div>
CSS代码如下。
.page{
width:500px;
height:500px;
border:2px solid #000000;
}
图1 创建一个div元素
按F12快捷键进入开发者模式，查看body元素的默认外边框。由图2可知，div元素并没有紧贴浏览器显示，这是因为body元素默认有margin样式。
图2 查看body元素的默认外边框
一般在写页面时，会先设置body的外边距为0，这称为CSS的样式重置，作用是让页面样式更加精确，CSS代码如下。
body{margin:0;}
在容器中新建两个div元素，将class属性分别设置为box1、box2，背景色分别设置为浅绿色与橙色，浏览器显示效果如图3所示。CSS代码如下。
.box1{
width:100px;
height:100px;
background-color:#d9ebb1;
}
.box2{
width:100px;
height:100px;
background-color:#f2ae7d;
}
HTML代码如下。
<body>
<div class="page">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
图3 新建两个div元素
给box1设置CSS样式margin:50px，浏览器显示效果如图4所示，box1在上侧和左侧距离容器50px，box2与box1距离50px，CSS代码如下。
.box1{
width:100px;
height:100px;
background-color:#d9ebb1;
margin:50px;
}
图4 给box1设置CSS样式margin:50px
margin同样可以单独设置4个不同方向，复合写法与padding一致，遵循顺时针的规律，此处不再赘述。
2、margin在使用中的问题
1. margin叠压
【例】创建两个div元素，外边距分别为100px和150px，浏览器显示效果如图5所示，CSS代码如下。
.box{
width:100px;
height:100px;
background-color:#b6d16a;
}
.box:nth-of-type (1){
margin:100px;
}
.box:nth-of-type (2){
margin:150px;
}
HTML代码如下。
<div class="box"></div>
<div class="box"></div>
图5 创建两个div元素
如果两个元素的外边距可以叠加的话，它们之间的距离应该是100px+150px=250px。
打开开发者模式验证两个元素之间的实际距离，如图6所示，可以看到两个元素之间的实际距离只有150px，这个数值恰好是两个元素中外边距较大的那一个。
图6 在开发者模式下查看两个元素之间的距离
当两个垂直外边距相遇时，它们将形成一个外边距，此时外边距的值是两个外边距中较大的那一个，这种现象称为margin的叠压现象，如图7所示。
图7 margin的叠压
虽然没有方法能彻底解决margin的叠压，但可以通过其他写法来避免这个问题。例如，当希望两个元素之间的距离为250px时，直接设置其中一个元素的边距为250px;在没有边框和背景的情况下，使用padding来代替margin。另外，两个浮动元素之间不会发生margin的叠加。
2.margin的传递
【例】创建一个类名为box的div元素，内部有box1和box2两个子元素，运行结果如图8所示。代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin的传递 </title>
</head>
<style>
.box{
width:500px;
height:500px;
background-color:#fbcd5d;
}
.box1,.box2{
width: 100px;
height: 100px;
background-color:#b6d16a;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
图8 margin的传递
给box1和box2添加100px的外边距，CSS代码如下，预期显示效果如图9所示，浏览器实际显示效果如图10所示。
.box1,.box2{
width: 100px;
height: 100px;
background-color:#b6d16a;
margin:100px;
}
图9 预期显示效果
图10 浏览器实际显示效果
由图10可知，紧邻父元素上边框的子元素并没有显示100px的margin-top，反而父元素获得了100px的margin-top，这种现象称为margin的传递。当父元素没有边框时，第一个子元素的margin-top会传递给父元素。
有3种处理margin传递的方法，处理后浏览器可显示如图9所示的预期效果。
(1)给父级元素添加属性overflow:hidden，CSS代码如下。
.box{
width:500px;
height:500px;
background-color:#fbcd5d;
overflow: hidden;
}
(2)给父级元素设置与内容同一颜色的上边框，此时要注意将父级元素的高度减去上边框的高度，CSS代码如下。
.box{
width:500px;
height:499px;
background-color:#fbcd5d;
border-top:1px solid #fbcd5d;
}
(3)用父级元素的padding-top代替box1的margin-top。设置box1的margin-top为0，设置父级元素的padding-top为100px，并且将父级元素的height属性减去100px，CSS代码如下。
