首页 > 代码库 > html 的边距合并问题
html 的边距合并问题
1.假设有元素A,其父容器为Father 垂直间距的合并
当父容器Father没有定义边框和padding时,元素A设置margin-top时不会出现A对Father的margin现象,反而是出现了Father对Father的父容器的margin-top,这就是边距的合并,相当于Father没有界限,而其儿子A又要margin-top一下,所以就变成了A的Father对A Father的Father的margin-top.
同样的可以扩展到多级的嵌套上,最低层的元素希望有margin-top ,就需要直到其父类容器有边界(padding or border)为止(最顶层就是body的窗口了),所以表现是一级一级的往上合并.
看例子:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <style> 6 *{ 7 margin:0px; 8 padding:0px; 9 }10 #d1{11 width:800px;12 height:800px;13 background-color:red;14 }15 #d2{16 width:400px;17 height:400px;18 background:gray;19 }20 #d3{21 width:100px;22 height:100px;23 margin:100px;24 background-color:green;25 }26 </style>27 </head>28 <body> 29 <div id="d1">30 <div id="d2">31 <div id="d3"></div>32 </div>33 </div>34 </body>35 </html>
這里d3设置了margin-top:100px
所以显示效果如下，蓝色块d3本来是要对于灰色块d2的margin-top的，但是d1,d2都没有border和padding，所长直接变成了d1对于的窗口的margin-top了.
下面稍微在d2的样式上加个padding的效果后者?碐边框 border:1px dotted;
1 #d2{2 width:400px;3 height:400px;4 background:gray;5 padding:1px;6 }
在d1块中加padding或者border也能,只是变成了d2对d1的margin-top了
2.同级元素中的垂直间距合并
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <style> 6 *{ 7 margin:0px; 8 padding:0px; 9 }10 #d1{11 width:200px;12 height:200px;13 background-color:red;14 margin:20px;15 }16 #d2{17 width:200px;18 height:200px;19 margin-top:20px;20 background:gray;21 }22 </style>23 </head>24 <body> 25 <div id="d1"></div>26 <div id="d2"></div>27 </body>28 </html>
本来是想d2块是margin-top:20px的,同时d1块有margin-bottom:20px,这样算起来d1,d2之间应该是有40px的,但是‘它‘把他们部分间距吃了..只取其中边距大的作为两个实际的间距.事实上p标签就是这样工作的,每个段落之间的间距不会很大的...
3.没有设置border或者padding的空容器,其上下margin也会合并在一起....和第1中类似
参考文章 http://www.w3school.com.cn/css/css_margin_collapsing.asp
html 的边距合并问题