首頁 > web前端 > html教學 > 为什么连续2个div的margin 20 不会出现40?_html/css_WEB-ITnose

为什么连续2个div的margin 20 不会出现40?_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:08:14
原創
1028 人瀏覽過

为什么连续2个div的margin 设置了margin:20px auto;
我的理解应该是2个div之间有40px的间距,。 可显示出来却只有20px

怎么那么奇怪?

<style type="text/css">	.div1{margin:20px auto;width:500px;height:100px;background-color:#FF99FF;overflow:hidden;}	.div2{margin:20px auto;width:500px;height:100px;background-color:#339933;overflow:hidden;}	.div3{margin:20px auto;width:500px;height:100px;background-color:#9933FF;overflow:hidden;}</style><div class="div1"></div><div class="div2"></div><div class="div3"></div>
登入後複製


回复讨论(解决方案)

理解一下盒子模型,是两个border的距离吧

这是规范中的边距合并现象

margin设置是相对应本身设置的div而言,并不涉及其他div,所以不是40px。

外补白,补的只是自己这个DIV的,不关其它人的事!

垂直边距出现合并的现象

学习贴

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板