如何在CSS工作的负边距,为什么是(margin-top：-5！= margin-bottom：5)？

垂直定位元素的一个常见技巧是使用以下CSS：

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

当在Chrome中的指标视图中看到这是您看到的：

但是，当您将鼠标悬停在元素上方时，没有描绘视觉边缘，即边距在边框“外部”，并且可以可视化。但是负边距没有出现。他们如何看起来，它是什么，使它不同？

为什么margin-top：-8px不同于margin-bottom：8px？

那么，负利润如何工作，它们背后的直觉是什么。他们如何“碰撞”(如果margin-top <0)一个项目？

解决方法

负边距在css中有效，并且理解他们的(合规)行为主要基于 box model和边际崩溃。虽然某些情况更复杂，但在研究规范后可以避免许多常见的错误。

例如，您的示例代码的呈现由css规范指导，如calculating heights and margins for absolutely positioned non-replaced elements中所述。

如果我做一个图形表示，我可能会去这样的东西(不按比例)：

边框框顶部丢失了8px，但这不会影响内容&填充盒。因为你的元素是绝对定位的，将元素向上移动不会对布局造成任何进一步的干扰;而静态流内容并不总是这样。

奖金：

仍然需要说服阅读规范是要走的方式(而不是articles like this)？我看到你正在尝试垂直居中的元素，所以为什么你必须设置margin-top：-8px;而不是margin-top：-50％;?

嗯，在CSS中的垂直居中是harder than it should be.当设置均匀的顶部或底部边距在％，该值计算为a percentage always relative to the width of the containing block.这是一个常见的陷阱，很少在w3 docos之外描述的怪癖