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

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

WBOY
WBOYOriginal
2016-06-24 12:08:141009Durchsuche

为什么连续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的,不关其它人的事!

垂直边距出现合并的现象

学习贴

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn