<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> body{ margin:0px; /* 设置body中margin属性(默认有8px) */ } .box{ width:202px; height:156px; background-color:pink; margin: 50px auto 0; /* 设置上边距50px 水平自动居中 下边距不设置 */ } .box div{ width:202px; height:30px; border:1px solid green; background-color:gold; margin:-1px; /* 解决边框重叠变粗问题 */ } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
在垂直方向上,当两个外边距相遇时,将会形成一个外边距,合并后的外边距高度等于两个外边距中较大的那个值。
举例:垂直方向上有两个盒子,盒子1 和 盒子2。盒子1设置margin-bottom:20px; 盒子2设置margin-top:30px; 此时两个盒子的间距并不是50px,而是30px。
解决方法:
1. 使用这种特性
2. 设置一边的外边距,一般设置margin-top
3. 将元素浮动或定位
在两个盒子嵌套时,内部的盒子设置margin-top会加到外边的盒子上,导致内部盒子设置失败。
解决方法:
1. 外部盒子设置一个边框
2. 外部盒子设置overfolw:hidden
3. 使用伪元素类
.clearfix:before{ /* 相当于方法1 */ content:''; display:table; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>margin-top 塌陷</title> <style type='text/css'> .clearfix:before{ content:''; display:table; } body{ margin:0; } .box{ width:200px; height:200px; background-color:gold; margin:auto; } .con{ width:120px; height:50px; background-color:green; margin-left:40px; margin-top:75px; } </style> </head> <body> <div class='box clearfix'> <div class='con'></div> </div> </body> </html>