margin重疊現象

時間 2019-11-11

標籤 margin 重疊現象欄目 CSS 简体版

原文原文鏈接

1.上下/左右相鄰的普通元素margin，不是二者相加之和，而是取最大值，這個現象叫作margin重疊。
2. 普通元素纔會發生margin重疊，若是是float元素，就不會發生。margin是二者相加之和。html

例如：1普通元素spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習(margin重疊現象）</title>
    <style>
                  #test1{
                      height: 100px;
                      background: blue;
                      margin-bottom: 50px;
                  }
                  #test2{
                      height: 100px;
                      background: green;
                      margin-top:50px; 
                  }
    </style>
</head>
<body>
    <div id="test1"></div>
    
    <div id="test2"></div>
</body>
</html>

2，浮動元素：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習(margin重疊現象）</title>
    <style>
                  #test1{
                      height: 100px;
                    width: 200px;
                      background: blue;
                    margin-bottom: 50px;
                    float: left;
                  }
                  #test2{
                      height: 100px;
                    width: 200px;
                      background: green;
                       float: left;
                     clear: left;
                      margin-top:50px; 
                  }
    </style>
</head>
<body>
    <div id="test1"></div>
        <div id="test2"></div>
    
</body>
</html>

3,父子（普通元素）發生margin重疊現象htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習(margin重疊現象）</title>
    <style>
                  #test1{
                      height: 150px;
                    width: 200px;
                      background: blue;

                   
                  }
                  #test2{
                      height: 50px;
                    width: 50px;
                      background: green;
                      
                      margin-bottom:50px; 
                  }
                  #test3{
                    height: 50px;
                    width: 50px;
                    background: green;
                    margin-top: 50px;
                  }
    </style>
</head>
<body>
    <div id="test1">
        <div id="test2"></div>
        <div id="test3"></div>
    </div>
</body>
</html>

4，父子（子爲浮動元素）不發生margin重疊blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習(margin重疊現象）</title>
    <style>
                  #test1{
                      height: 150px;
                    width: 200px;
                      background: blue;

                   
                  }
                  #test2{
                      height: 50px;
                    width: 50px;
                      background: green;
                      float: left;
                      margin-bottom:50px; 
                  }
                  #test3{
                    height: 50px;
                    width: 50px;
                    background: green;
                    float: left;
                    clear: left;
                    margin-top: 50px;
                  }
    </style>
</head>
<body>
    <div id="test1">
        <div id="test2"></div>
        <div id="test3"></div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。