CSS中關於margin的理解誤區

時間 2019-12-09

標籤 css 關於 margin 理解誤區欄目 CSS 简体版

原文原文鏈接

思考一

在之前，我對於margin的理解是這樣的，此處用margin-top舉例：指的是離相鄰元素之間的距離。css

可是實際是：相對於自身原來的位置偏移。html

舉個例子：編碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- 規定字符集的編碼爲utf-8 -->
    <meta charset="utf-8">

    <style type="text/css"> body { position: relative; padding: 0px; height: 500px;
        } #Red { width: 200px; height: 80px; border: 1px solid red; position: relative;
        } #Green { width: 200px; height: 80px; border: 1px solid yellowgreen; margin-top: 10px;
        }
    </style>
</head>

<body>

<div id="Red">Red</div>
<div id="Green">Green</div>

</body>
</html>

其表現爲：spa

可是若是我把Red這個div設置下margin-top:10pxcode

此時Red會往下移動10px，若是按照最開始的理解：離相鄰元素之間的距離。那麼Green這個div也應該往下移動，可是實際上卻不是如此，見下圖htm

Green是沒有移動的!blog

能夠得出：margin是相對於自身原來的位置偏移。utf-8

思考二

下面是我在查看筆記的時忽然頓悟的：文檔

結論：margin這種定位方式是會影響到後續的兄弟元素的，而relative這種定位方法是不會影響後續兄弟節點的。it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- 規定字符集的編碼爲utf-8 -->
    <meta charset="utf-8">

    <style type="text/css"> body { position: relative; padding: 0px; height: 500px;
        } #Green { width: 200px; height: 80px; border: 1px solid yellowgreen; float: left;
        } #Red { width: 200px; height: 80px; border: 1px solid red; float: left;

            /*狀況1*/ margin-left: 20px;

            /*狀況2*/
            /*position: relative;*/
            /*left: 20px;*/
        }
    </style>
</head>

<body>

<div id="Red">Red</div>
<div id="Green">Green</div>

</body>
</html>