margin的重叠现象

时间 2019-11-10

标签 margin 重叠现象栏目 CSS 繁體版

原文原文链接

当两个相邻的普通元素设置margin时，则它们的间距并非简单的外边距相加。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin的重叠现象</title>
</head>
<style>
    #div1{
        height: 100px;
        margin-bottom:50px; 
        background: blue;
    }
    #div2{
        height: 100px;
        margin-top: 50px;
        background: green;
    }
</style>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

效果以下：spa

两个div的高度是100px，明显间距不是50px＋50pxcode

缘由是当两个相邻普通元素设置margin时，实际它们之间的外边距知足其中设置外边距较大的一方。固然同时确定知足设置外边距较小的一方。htm

这种重叠现象不值发生在兄弟元素之间，父子元素也会发生重叠现象。blog