CSS中的margin是指元素與周圍元素之間的間距,在網頁布局中起到非常重要的作用。同時,CSS中還有一個非常有趣的現象,即margin傳遞。所謂margin傳遞,是指當兩個元素發生重疊時,它們的margin不是簡單相加,而是取兩者中較大的那個值。
.box1 { width: 200px; height: 200px; margin: 100px; background-color: red; } .box2 { width: 150px; height: 150px; margin: 50px; background-color: blue; }
在上面的代碼中,.box1和.box2形成了重疊的效果。根據我們對margin傳遞的了解,它們的margin應該是取兩者中較大的那個值,即100px。因此,.box2并沒有增加整個重疊區域的margin。
需要注意的是,margin傳遞只發生在border邊界內的元素之間。如果兩個元素的border相遇,則margin傳遞不再起作用。
.box1 { width: 200px; height: 200px; margin: 100px; border: 10px solid black; background-color: red; } .box2 { width: 150px; height: 150px; margin: 50px; background-color: blue; }
上面的代碼中,因為.box1有border,所以.box2的margin傳遞沒有起作用。此時,.box2的margin會簡單地和.box1的border重疊。
綜上所述,margin傳遞是CSS布局中的一個有趣現象。當元素發生重疊時,我們可以使用margin傳遞來控制它們之間的間距。但是需要注意的是,邊界內的元素才會參與到margin傳遞中。
上一篇css marking
下一篇css3圖片方法縮小動畫