css3-盒子模型之外边距

 围绕在内容边框的区域，就是外边距，外边距默认为透明区域

外边距接受任何长度单位、百分数值

 设置方式和内边距大同小异，可以分为：

整体设置：margin
单侧设置：margin-bottom/left/right/top

其中，还有一个是外边距合并的概念，如果存在两个盒子，上面盒子的margin是50px,下面一个盒子的margin是100px，那么页面的效果将是上面盒子距离顶部50，下面盒子距离第一个盒子的距离是100.
而如果两个盒子的margin都是100，那么他们的距离仍旧是100.
总结： 盒子外边距叠加效果遵循距离大的那个值为标准。

下面是一个内外边距的综合使用：

<div class="container">
    <div class="bd">
        <div class="pd">
            <div class="content">
                hello Css3
            </div>
        </div>
    </div>
</div>

CSS3文件内：
body{
    margin: 0;
}
.container{
    margin:10px;
}
.bd{
    border-style: groove;
}
.pd{
    padding: 10px;
}
.content{
    background-color: blue;
}