為什麼 `margin-top: -8px` 往上移動而 `margin-bottom: 8px` 往下移動？

CSS 負邊距如何工作以及頂部和底部邊距之間的區別

在CSS 中，負邊距用於通過改變來創造視覺效果元素的位置。當應用於上邊距時，負值會產生向上移動，而負值下邊距會將元素向下推。

考慮以下範例：

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

這裡，負 margin-top 值-8px 將元素往上移動其高度的一半。這是透過將邊距框（元素周圍的不可見間距）延伸到內容框邊緣（可見區域）上方來實現的。

為什麼 margin-top:-8px ≠ margin-bottom:8px？

雖然看似相似，但 margin-top:-8px 和 margin-bottom:8px 的效果有所不同。前者將元素向上移動，後者將其向下推動。這種差異是由邊距錨點的位置所造成的。

在 CSS 中，所有邊距都錨定在包含區塊的邊界框邊緣。對於定位元素，包含區塊是該元素的父元素。使用 margin-top 時，錨點位於父邊界框的上方邊緣。因此，負值會將元素移動到該點之上。

相反，margin-bottom 將元素錨定在包含塊的底部邊緣。因此，負底部邊距會將元素向下移動，而不是向上推。

直觀理解

負頂部邊距有效地降低了邊距框的高度，從而創建元素向上移動的錯覺。另一方面，負的底部邊距會增加邊距框的高度，使其看起來好像元素已向下移動。

以上是為什麼 `margin-top: -8px` 往上移動而 `margin-bottom: 8px` 往下移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！