性设置都是介绍了盒子模型中的内容概括。开始今天的主题:外边距合并。
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合
并的外边距的高度中的较大者。
(1)外边距合并
外边距合并叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,外
边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外
边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
如果看上面的图还不直观,我们来举一个实例:
CSS盒子模型外边距合并 * {/*去掉所有的缺省设置*/ margin:0; padding:0; border:0;}#div_1 { width:100px; height:100px; margin-top:20px;/*第一个盒子的上外边距为20像素*/ margin-bottom:20px;/*第一个盒子的下外边距为20像素*/ background-color:#FF0000;}#div_2 { width:100px; height:100px; margin-top:10px;/*第二个盒子的上外边距为10像素*/ background-color:#0000FF;}
查看更多关于CSS基础学习十五:盒子模型补充之外边距合并_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did110012