CSS 中的負邊距:深入探究
負邊距雖然在 CSS 中有效,但經常會引起混亂和誤解。本文深入研究負邊距的複雜性,探討其機制並解決常見問題,例如 margin-top: -5px 和 margin-bottom: 5px 之間的差異。
根據 CSS 規範,負邊距會減少尺寸的邊距框,同時保持內容和填充框不受影響。當應用於絕對定位的元素(如提供的範例)時,這一點在視覺上是顯而易見的。儘管邊距框中的空間遺失,但由於邊距框的位移,元素本身會向上移動。
與向外擴展邊距框的正邊距不同,負邊距會「向上凸起」透過視覺上縮小邊距框來調整元素。這種縮小會產生元素被向上推的錯覺。
margin-top:-5px 和margin-bottom:5px 的區別
margin-top 的區別:-5px 和margin-bottom:5px 位於它們的相對位置。 margin-top:-5px 將邊距框向上推,有效地將元素向下移動 5px。另一方面,margin-bottom:5px 會增加元素下方邊距框的大小,使其向下移動 5px。
在垂直居中的情況下,必須同時設定頂部和底部將邊距設為 -50% 而不是 -8px 以實現正確對齊。這是因為百分比邊距是根據包含區塊的寬度而不是高度來計算的。
以上是CSS 中的負邊距:它們實際上是如何運作的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!