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;}