java中内边距跟外边距_CSS 内边距与外边距

写项目的时候一直用到边距，今天用了一下午的时间好好研究了一下边距，发现CSS边距并非那么简单。这里就和大家分享一下：

一、内边距

如下面代码

html:

css:

.test{

width:100px;

height:100px;

background-color:#fbc;

padding:10px 20px 30px 40px;

}

这时候在这个div中会形成一个内容框它里顶部边框距离为10px，右边20px,下边30px,左边40px，这个内容框应该是100*100(横*竖)的框。他现在整个框应该为160*140。这个比较简单。

二、外边距

外边距就比较有趣了

html:

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不存在上面重合的性质。