margin垂直方向的塌陷

来源：互联网发布：大数据开发和数据挖掘编辑：程序博客网时间：2024/05/01 09:51

有两个上下排列的盒子，上盒子有一个下margin，下盒子有一个上margin。两个盒子的间距不是他们margin 之和。因为有垂直方向的塌陷。小margin会塌陷在大margin里。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        .box1 {            width: 200px;            height: 200px;            background-color: #92fffc;            border: 1px solid #000;            margin-bottom: 50px;        }        .box2 {            width: 200px;            height: 200px;            background-color: #e7ff4d;            border: 1px solid #000;            margin-top: 80px;        }    </style></head><body>    <div class="box1"></div>    <div class="box2"></div></body></html>

直接用图解释：
这里写图片描述

阅读全文

0 0