margin的塌陷問題：
元素和元素在垂直方向上的margin會有塌陷問題。會以margin數值大的為准，大的會覆蓋掉小的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin:0; } .father{ width: 400px; overflow: hidden; border:1px solid gray; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
當給兩個標准流下兄弟盒子設置垂直方向上的margin時，那么以較大的為准，那么我們成這種現象叫塌陷，沒法解決。當設置浮動后就不會有塌陷現象了。
margin:0 auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 300px; height: 300px; background-color: skyblue; margin:0 auto; line-height: 300px; text-align: center; } </style> </head> <body> <div>顧清秋</div> </body> </html>
當div盒子設置 margin: 0 auto;盒子會自動居中。
使用margin: 0 auto; 要注意：
1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;
2.只有標准流下的盒子 才能使用margin:0 auto; 當一個盒子浮動了，固定定位，絕對定位(后面會講)， 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
margin屬性是描述兄弟盒子的關系。
善於使用父盒子的padding來調整子盒子的位置：
使用padding屬性調整上圖紅色盒子的位置：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father{ width: 300px; height: 250px; padding-top: 50px; background-color: skyblue; } .son{ float: left; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>