写项目的时候一直用到边距，今天用了一下午的时间好好研究了一下边距，发现CSS边距并非那么简单。这里就和大家分享一下：
一、内边距
如下面代码
html:
<div class="test"><div>
css:
.test{
width:100px;
height:100px;
background-color:#fbc;
padding:10px 20px 30px 40px;
}
这时候在这个div中会形成一个内容框它里顶部边框距离为10px，右边20px,下边30px,左边40px，这个内容框应该是100*100（横*竖）的框。他现在整个框应该为160*140。这个比较简单。
二、外边距
外边距就比较有趣了
html:
<div class="test">
<div class="test1"></div>
<div class="test2"></div>
<div>
css:
.test{
width:100px;
height:100px;
background-color:#fbc;
margin-top:10px;
}
.test1{
width:20px;
height:20px;
background-color:blue;
margin-top:10px;
}
.test2{
width:20px;
height:20px;
background-color:red;
margin-top:20px;
}
这个时候大家觉得会有什么样的状况，我和大家透露点这个时候div.test在他上边框上会产生一个10px的外边距；而div.test1上边框和div.test上边框重合，在它上边框也会产生一个10px的外边距，这个将于div.test上边距重合，同样的margin-bottom同样也是这个原理。margin-top和margin-bottom边距不会针对它父类div而产生边距，而是会和它父类或同等级的外边距进行重合，如果它们外边距都为正数，则取最大值，若有一个为负，则正负相加得到最后值。
这个大家可以去试试！
另外margin-left会针对他父类或他同级产生边距，将margin-left：10px,则这个元素里父类左边框距离为10px，而产生一个10px的边距，而margin-right就完全没有限制，只会影响同级元素，他可能会超过父类元素的宽度。同时，margin-left不存在上面重合的性质。