CSS 中的外邊距(margin)是用來控制元素與其他元素之間的間距的。在一般情況下,外邊距會應(yīng)用在元素的四周,即上下左右。但是,有的時候我們需要控制元素與其他元素之間的間距只存在于上方。這時,我們可以利用 CSS 上方外邊距實現(xiàn)這個效果。
下面是一個示例,假設(shè)我們有兩個 div 元素,分別為 div1 和 div2:
此時,這兩個 div 元素之間會存在上下間距。如果我們只需要讓 div2 元素距離 div1 元素有一個上方的間距,而不是四周都有間距,就可以使用 CSS 上方外邊距來實現(xiàn):我是 div1我是 div2
.div2 { margin-top: 20px; } .div1 + .div2 { margin-top: 0; }注意,這里使用了相鄰兄弟選擇器(+),也就是選取緊接在 div1 元素后的 div2 元素。這樣就可以保證只有 div2 元素有上方外邊距,而 div1 元素與其他元素之間的外邊距不受影響。 CSS 上方外邊距的實現(xiàn)方式還有很多種,比如使用 padding 替代 margin 實現(xiàn)、使用負 margin 實現(xiàn)等等。但是,不管使用什么方式,都需要注意使用時的兼容性和影響面,以及是否會影響布局和文檔流等方面的問題。