围绕在内容边框的区域,就是外边距,外边距默认为透明区域
外边距接受任何长度单位、百分数值
设置方式和内边距大同小异,可以分为:
整体设置: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;
}