CSS 内边距与外边距
2020-12-13 02:01
标签：class color width c html htm 写项目的时候一直用到边距，今天用了一下午的时间好好研究了一下边距，发现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不存在上面重合的性质。 CSS 内边距与外边距,搜素材,soscw.com CSS 内边距与外边距 标签：class color width c html htm 原文地址：http://www.cnblogs.com/ai3xiaoyi/p/3714548.html