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

相關標籤/搜索