margin的值和垂直外边距重叠问题

  • A+
所属分类:Web前端
摘要

并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的!

并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的!

<!DOCTYPE html> <html> <head>     <meta charset="utf-8"/>     <title></title>     <style type="text/css">     *{margin: 0;padding: 0;}     .box1,.box2{     width: 200px;     height: 200px;         }     .box1{     background-color: #f90;     margin-bottom: 20px;     }     .box2{     background-color: aqua;     margin-top: 50px;     }     </style> </head> <body>     <div class="box1"></div>     <div class="box2"></div> </body> </html>

 margin的值和垂直外边距重叠问题

margin跟padding内边距的方位值和取值情况一样,顺时针方向(上右下左),点击查看"css盒子模型之内边距padding及简写"