为什么 `margin-top: -8px` 向上移动而 `margin-bottom: 8px` 向下移动？

CSS 负边距如何工作以及顶部和底部边距之间的区别

在 CSS 中，负边距用于通过改变来创建视觉效果元素的位置。当应用于上边距时，负值会产生向上移动，而负值下边距会将元素向下推。

考虑以下示例：

这里，负 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中文网其他相关文章！