【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 。

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

沒有留言: