Home  >  Article  >  Web Front-end  >  为什么连续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:14979browse

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

垂直边距出现合并的现象

学习贴

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn