在设置元素margin值的时候经常会设计到元素之前的间距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { padding: 200px; } .one { width: 100px; height: 100px; background: red; margin-bottom: 30px; } .two { width: 100px; height: 100px; background: green; margin-top: 30px; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
// 运行结果为两个盒子之间的margin值为30px 原因是在设置两个挨着的元素的margin值的时候，去两者中最大的那个，这也符合我们开发的需求。