CSS margin 的百分比設定問題

當你需要調整網頁中某個元素與相鄰邊界的間距時,必須透過 margin 樣式進行設定,例如:

<div style="height:200px;width:400px;border:1px dotted silver;">
        <div style="width: 150px; height: 100px;
background-color: steelblue;">
        </div>
</div>

這段HTML會形成以下的結果畫面:


現在於其中內部的 div 元素設定margin-top:100px 樣式如下(紅色標示的部份):

<div style="height:200px;width:400px;border:1px dotted silver;">
        <div style="width: 150px; height: 100px;
background-color: steelblue; margin-top:100px;">
        </div>
</div>

虛線框中的藍色 div 方塊因為設定了 margin-top:100px 樣式,因此與上邊界會撐開 100px距離 ,剛好是其高度的一半,結果如下:


我們再次調整 margin-top 將其設定為 50% 如下:

<div style="height:200px;width:400px;border:1px dotted silver;">
        <div style="width: 150px; height: 100px;
background-color: steelblue; margin-top:50%;">
        </div>
</div>

再來看看結果如下:







這一次與上邊界的距離是剛好是外部 div 元素的高度 200px 而非其 50% -100px。會有這種結果的原因在於 margin 樣式單位如果指定為 % ,則以其父元素的寬度為依據進行設定,因此 400x50%=200px 。

因為一般的容器元素如果沒有設定「寬度/高度」樣式,在預設的情形下並不會有高度的值,但是寬度預設為呈現畫面的寬度,因此一律會以寬度為設定標準,如此一來得到上述的結果。

沒有留言: