margin-top不起作用？！

在CSS樣式中，margin-top是一個常用的屬性，但是如果你發現它不起作用，那該怎麼辦呢？這是一個比較頭疼的問題，今天我們就來一起探究一下這個問題。

一、margintop屬性

首先我們來看一下margin-top屬性。通常情況下，margin-top屬性可以用來控制元素與其上面元素之間的距離。比如說，我們有一個元素，想要讓它與上一個元素之間有一定距離，就可以設置margin-top屬性的值為我們需要的距離。

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
}

在上述代碼中，我們設置了一個名為box的元素，寬度和高度均為100px，並且設置了margin-top屬性的值為20px。如果一切正常，你應該能夠看到這個元素距離上方元素有20px的距離。

二、margintop失效原因

既然margin-top屬性可以用來控制距離，那麼什麼情況下會出現不起作用的情況呢？

首先我們需要注意的是，如果一個元素沒有被設置為塊級元素，那麼它的margin-top屬性是不會起作用的。比如說，如果我們想要給一個行內元素設置margin-top屬性，就需要將它的display屬性值設置為block，比如說：

a{
    display: block;
    margin-top: 20px;
}

另一個常見的原因是，元素與其上一個元素之間存在float屬性或絕對定位（position）屬性。具體來說，如果一個元素上方存在一個帶有float屬性的元素，那麼它的margin-top屬性會失效。這是因為float屬性會將元素從正常文本流中移出，使得它失去了與上方元素的連續性。同理，絕對定位的元素也會影響margin-top的效果。

三、margintop用法

margin-top屬性的用法比較多樣化，可以結合不同的值實現不同的效果。下面我們來簡單介紹一下幾種常見的用法。

1. px值

最常見的用法就是直接設置一個像素值。比如說，我們希望一個元素與它上方的元素間隔20個像素：

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
}

2. em值

em值是相對長度單位，它是相對於當前元素的字體大小計算的。如果我們在一個元素上設置margin-top: 1em，那麼它的距離就相當於當前元素字體大小的1倍。

.box{
    font-size: 16px;
    margin-top: 1em;
}

3. 百分比

百分比也是一種相對長度單位，它是相對於父元素的寬度計算的。比如說，我們在一個子元素上設置margin-top: 20%，那麼它的距離就相當於父元素寬度的20%。

.parent{
    width: 200px;
}

.child{
    margin-top: 20%;
}

四、margintop百分比

對於margin-top屬性，百分比值有時會讓人產生迷惑。為什麼會有這種情況呢？

其實，與其他屬性不同，如果我們在給一個元素設置margin-top屬性時，同時也給它的父元素設置了padding-top屬性，那麼百分比值就會相對於父元素的padding-top值計算，而不是相對於父元素的高度計算。

.parent{
    padding-top: 50px;
}

.child{
    margin-top: 20%;
}

在上述代碼中，我們給父元素添加了50px的padding-top值，然後在子元素中設置margin-top: 20%。實際上，子元素的距離不是20%的父元素高度，而是20%的父元素padding-top值。

五、margin-top和margin-bottom

在編寫CSS樣式時，我們可能會用到margin-top和margin-bottom屬性。如果給一個元素同時設置了這兩個屬性，那麼會發生什麼呢？

實際上，如果一個元素同時具有margin-top和margin-bottom屬性，那麼它們的距離會取兩者之和作為結果。比如說，我們將margin-top的值設置為20px，margin-bottom的值設置為30px，那麼元素的上下間隔就是50px。

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
    margin-bottom: 30px;
}

六、layout margintop

在編寫CSS樣式時，有時候會需要製作布局。在某些情況下，我們需要為一個元素設置margin-top屬性來將它與上方元素分開。但是實際上，如果上方元素也具有類似的margin屬性，那麼它們之間的距離就會疊加，導致布局混亂。

為了解決這個問題，我們可以使用一個名為「layout margintop」的技術。這個技術的本質是利用margin-top的「坍塌」效應，使得兩個相鄰的元素之間的間隔等於它們之間較大的margin值，而不是兩者之和。

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after{
    clear: both;
}

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
}

.box2{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 30px;
}

.clearfix{
    margin-top: 20px;
}

在上述代碼中，我們通過為clearfix偽元素添加clear屬性，創建了一個「清除浮動」的效果。同時，我們也將clearfix元素設置了margin-top: 20px的值，這樣clearfix與上方元素之間的間隔就是20px。

接下來，我們在clearfix中添加了兩個子元素，它們的margin-top屬性分別為20px和30px。由於clearfix具有「清除浮動」的效果，這兩個子元素可以排成一行。此外，由於我們還為clearfix元素設置了margin-top: 20px的值，所以兩個子元素之間的間隔就是它們兩者之間較大的margin值（即30px），而不是兩者之和（即20px + 30px = 50px）。

七、marginnote不好用

在使用margin-top屬性時，我們有時會遇到一些問題，比如說margin-top值對齊不準確，或者在不同的瀏覽器中呈現效果不同。這時候，我們可以考慮使用一些其他的技術來代替margin-top屬性的作用。

其中一個比較實用的技術就是marginnote。它的基本思想是，在一個元素內部插入一個空的元素（比如說span），然後通過為這個元素設置margin屬性來實現距離控制。由於它不受與上方元素的位置關係的影響，所以可以避免一些之前提到的問題。

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
}

.box span{
    position: absolute;
    top: -20px;
    left: 0;
    width: 0;
    height: 0;
    margin: 20px 0 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 20px solid red;
}

在上述代碼中，我們為一個名為box的元素設置了position: relative的屬性。然後，在它內部添加了一個span元素，通過對它的margin屬性進行設置，實現了20px的距離控制。由於這個元素是絕對定位的，所以其位置與box元素的位置無關，從而避免了可能出現的問題。

總結

margin-top屬性是CSS樣式中非常常用的一個屬性，但有時會面臨不起作用的問題。在本文中，我們從多個方面對這個問題進行了詳細的闡述。同時，我們也介紹了一些常用的解決方案，希望能夠對大家的開發工作有所幫助。