CSS 中的负边距是如何工作的，为什么是 (margin-top:-5 != margin-bottom:5)？

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

提问by PhD

A common trick for vertical positioning elements is to use the following CSS:

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

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

When seen in the metric view as in Chrome this is what you see:

当在 Chrome 中的度量视图中看到时，您会看到以下内容：

However, there is no visual margin depicted when you hover over the element i.e. the margin is 'outside' the border and can be visualized. But negative margins don't show up. How do they look and what is it that makes it different?

但是，当您将鼠标悬停在元素上时，没有描绘出视觉边距，即边距在边框“外部”并且可以被可视化。但负利润率不会出现。它们的外观如何，是什么让它与众不同？

Why is margin-top:-8pxnot the same asmargin-bottom:8px?

为什么margin-top:-8px不一样margin-bottom:8px？

So just how do negative margins work and what's the intuition behind them. How do they 'bump up' (in case of margin-top < 0) an item?

那么负边距是如何工作的以及它们背后的直觉是什么。他们如何“提升”（在margin-top < 0）一个项目？

采纳答案by o.v.

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box modeland margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

负边距在 css 中是有效的，理解它们的（合规）行为主要基于框模型和边距折叠。虽然某些场景更复杂，但在研究规范后可以避免许多常见错误。

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

例如，示例代码的呈现由 css 规范指导，如计算绝对定位的非替换元素的高度和边距中所述。

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

如果我要进行图形表示，我可能会使用这样的东西（不按比例）：

The margin boxlost 8pxon the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

顶部的边距框丢失8px，但这不会影响内容和填充框。因为你的元素是绝对定位的，向上移动元素 8px 不会对布局造成任何进一步的干扰；静态流入内容并非总是如此。

Bonus:

奖金：

Still need convincing that reading specs is theway to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px;and not margin-top:-50%;?

仍然需要说服，阅读规范是在去（而不是这样的文章是这样）？我看到你试图垂直居中元素，那么为什么你必须设置margin-top:-8px;而不是margin-top:-50%;？

Well, vertical centering in CSS is harder than it should be. When setting even topor bottommargins in %, the value is calculated as a percentage always relative to the widthof the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

好吧，CSS 中的垂直居中比它应该的更难。当以 %设置偶数顶部或底部边距时，该值将计算为始终相对于包含块宽度的百分比。这是一个相当常见的陷阱，并且在 w3 文档之外很少描述这个怪癖

回答by Ana

I'll try to explain it visually:

我将尝试直观地解释它：

/**
 * explaining margins
 */

body {
  padding: 3em 15%
}

.parent {
  width: 50%;
  width: 400px;
  height: 400px;
  position: relative;
  background: lemonchiffon;
}

.parent:before,
.parent:after {
  position: absolute;
  content: "";
}

.parent:before {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: dashed 1px #ccc;
}

.parent:after {
  left: 0;
  right: 0;
  top: 50%;
  border-top: dashed 1px #ccc;
}

.child {
  width: 200px;
  height: 200px;
  background: rgba(200, 198, 133, .5);
}

ul {
  padding: 5% 20px;
}

.set1 .child {
  margin: 0;
  position: relative;
}

.set2 .child {
  margin-left: 75px;
  position: relative;
}

.set3 .child {
  margin-left: -75px;
  position: relative;
}


/* position absolute */

.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}

.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}

.set6 .child {
  top: 50%; /* level from which margin-top starts 
 - downwards, in the case of a positive margin
 - upwards, in the case of a negative margin 
 */
  left: 50%; /* level from which margin-left starts 
 - towards right, in the case of a positive margin
 - towards left, in the case of a negative margin 
 */
  margin: -75px;
  position: absolute;
}

<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
  <div class="child">
    <pre>
.set1 .child {
  margin: 0;
  position: relative;
}
  </pre>
  </div>
</div>

<h3>Set 2</h3>
<div class="parent set2">
  <div class="child">
    <pre>
.set2 .child {
  margin-left: 75px;
  position: relative;
}
  </pre>
  </div>
</div>

<h3>Set 3</h3>
<div class="parent set3">
  <div class="child">
    <pre>
.set3 .child {
  margin-left: -75px;
  position: relative;
}
  </pre>
  </div>
</div>

<h2><code>position: absolute;</code></h2>

<h3>Set 4</h3>
<div class="parent set4">
  <div class="child">
    <pre>
.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}
  </pre>
  </div>
</div>

<h3>Set 5</h3>
<div class="parent set5">
  <div class="child">
    <pre>
.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}
  </pre>
  </div>
</div>

<h3>Set 6</h3>
<div class="parent set6">
  <div class="child">
    <pre>
.set6 .child {
  top: 50%;
  left: 50%;
  margin: -75px;
  position: absolute;
}
  </pre>
  </div>
</div>

回答by dxh

Margin is the spacing outside your element, just as padding is the spacing inside your element.

边距是元素外部的间距，就像填充是元素内部的间距一样。

Setting the bottom margin indicates what distance you want below the current block. Setting a negative top margin indicates that you want negative spacing above your block. Negative spacing may in itself be a confusing concept, but just the way positive top margin pushes content down, a negative top margin pulls content up.

设置底部边距表示您想要在当前块下方的距离。设置负上边距表示您希望块上方的间距为负。负间距本身可能是一个令人困惑的概念，但正如正上边距将内容向下推一样，负上边距将内容向上拉。

回答by Rich Bradshaw

A margin-top of -8px means it will be 8px higher than if it had 0 margin.

-8px 的 margin-top 意味着它将比 0 边距高 8px。

A margin-bottom of 8px means that the thing below it will be 8px further down that if it had 0 margin.

8px 的 margin-bottom 意味着它下面的东西将比它的边距为 0 还要向下 8px。

回答by schellmax

good points already made here, but while there is lots of information about howrendering of margins is accomplished by the browser, the whyisn't quite answered yet:

好点已经在这里提出，但是虽然有很多关于浏览器如何完成边距渲染的信息，但为什么还没有完全回答：

"Why is margin-top:-8px not the same as margin-bottom:8px?"

“为什么 margin-top:-8px 与 margin-bottom:8px 不一样？”

what we also could ask is:

我们还可以问的是：

Why doesn't a positive bottom margin 'bump up' preceding elements, whereas a positive top-margin 'bumps down' following elements?

为什么正的底部边距不会“向上”前面的元素，而正的顶部边距“向下”跟随元素？

so what we see is that there is a difference in the rendering of margins depending on the side they are applied to- top (and left) margins are different from bottom (and right) ones.

所以我们看到的是，根据应用边距的一侧，边距的渲染存在差异- 顶部（和左侧）边距与底部（和右侧）边距不同。

things are becoming clearer when having a (simplified) look at how styles are applied by the browser: elements are rendered top-down in the viewport, starting in the top left corner (let's stick with the vertical rendering for now, keeping in mind that the horizontal one is treated the same).

当（简化）查看浏览器如何应用样式时，事情变得更加清晰：元素在视口中自上而下呈现，从左上角开始（现在让我们坚持垂直呈现，请记住水平的处理相同）。

consider the following html:

考虑以下html：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

analogous to their position in code, these three boxes appear stacked 'top-down' in the browser (keeping things simple, we won't consider here the orderproperty of the css3 'flex-box' module). so, whenever styles are applied to box 3, preceding element's positions (for box 1 and 2) have already been determined, and shouldn't be altered any more for the sake of rendering speed.

类似于它们在代码中的位置，这三个框在浏览器中显示为“自上而下”堆叠（为简单order起见，我们不会在这里考虑css3 'flex-box' 模块的属性）。因此，每当样式应用于框 3 时，前面的元素的位置（框 1 和框 2）已经确定，不应再为了渲染速度而更改。

now, imagine a top margin of -10px for box 3. instead of shifting up all preceding elements to gather some space, the browser will just push box 3 up, so it's rendered on top of (or underneath, depending on the z-index) any preceding elements. even if performance wasn't an issue, moving all elements up could mean shifting them out of the viewport, thus the current scrolling position would have to be altered to have everything visible again.

现在，想象一下框 3 的顶部边距为 -10px。浏览器不会向上移动所有前面的元素来收集一些空间，而是将框 3 向上推，因此它呈现在顶部（或底部，取决于 z-index ) 任何前面的元素。即使性能不是问题，向上移动所有元素也可能意味着将它们移出视口，因此必须更改当前滚动位置才能再次显示所有内容。

same applies to a bottom margin for box 3, both negative and positive: instead of influencing already evaluated elements, only a new 'starting point' for upcoming elements is determined. thus setting a positive bottom margin will push the followingelements down; a negative one will push them up.

这同样适用于框 3 的底边距，无论是负的还是正的：不是影响已经评估的元素，而是为即将到来的元素确定一个新的“起点”。因此，设置正的底部边距会向下推以下元素；一个负面的会推高他们。

回答by Maybe

I wonder if this question has been answered well: how css margins work and why is it that margin-top:-5; is not the same as margin-bottom:5;?

我想知道这个问题是否得到了很好的回答：css margins 是如何工作的，为什么是 margin-top:-5; 与 margin-bottom:5 不同；?

Margin is distance from the surroundings of the element. margin-top says "... distance from surroundings as we measure from top 'side' of the element's 'box' and margin-bottom being the distance from the bottom 'side' of the 'box'". Then margin-top:5; is concerned with the top 'side' perimeter,-5 in that case; anything approaching from top 'side' can overlap top 'side' of element by 5, and margin-bottom:5; means distance between element bottom 'side' and surrounding is 5.

边距是与元素周围的距离。margin-top 表示“...与周围环境的距离，因为我们从元素的“盒子”的顶部“侧面”开始测量，而 margin-bottom 是与“盒子”底部“侧面”的距离”。然后 margin-top:5; 与顶部“侧面”周长有关，在这种情况下为-5；从顶部“侧”接近的任何东西都可以与元素的顶部“侧”重叠 5，并且 margin-bottom:5; 表示元素底部“侧面”和周围之间的距离为 5。

Basically that but affected by float'ed elements and the like: http://www.w3.org/TR/CSS2/box.html#margin-properties.

基本上是这样，但受浮动元素等影响：http: //www.w3.org/TR/CSS2/box.html#margin-properties。

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

I stand to be corrected.

我站着被纠正。

回答by Rob Trickey

Because you have used absolute positioning, and specified a top percentage, only margin-top will affect the location of your .item object. If instead you positioned it using bottom: 50%, then you'd need margin-bottom -8px to centre it, and margin-top would have no effect.

因为您使用了绝对定位并指定了最高百分比，所以只有 margin-top 会影响您的 .item 对象的位置。相反，如果您使用底部定位它：50%，那么您需要 margin-bottom -8px 将其居中，而 margin-top 将不起作用。

Margin affects the boundaries of an element in terms of positioning it, either absolutely as in your case, or relative to neighbouring elements. Imagine that margin is the foundations of your element on which it sits. They are typically the same size as it, but can be made larger or smaller on any or all of the four edges.

边距会影响元素在定位方面的边界，无论是绝对像您的情况，还是相对于相邻元素。想象一下，边距是它所在元素的基础。它们通常与它的尺寸相同，但可以在四个边缘中的任何一个或所有边缘上做得更大或更小。

Your CSS tells the browser to position the top of your element the margin at a point 50% of the way down the page. However, as all elements are not a single pixel, the browser needs to know which part of it to line up 50% of the way down the page. For lining up the top of the element, it uses the top margin. By default this is in line with the top of the element, but you can alter it with CSS.

您的 CSS 会告诉浏览器将元素顶部的边距定位在页面下方 50% 处。然而，由于所有元素都不是单个像素，浏览器需要知道它的哪一部分在页面下方的 50% 处对齐。为了排列元素的顶部，它使用顶部边距。默认情况下，这与元素的顶部一致，但您可以使用 CSS 更改它。

In your case, top 50% would result in the top of the element starting in the middle of the page. By applying a negative top margin, the browser uses the point 8px into the element from the top (ie the line across the middle of it) as the place to position at 50%.

在您的情况下，前 50% 将导致元素的顶部从页面中间开始。通过应用负上边距，浏览器使用从顶部到元素 8px 的点（即穿过它中间的线）作为定位在 50% 的位置。

If you apply a positive margin to the bottom, this extends the line the browser uses to position the bottom out away from the element itself, giving a gap between it and any adjacent element below, or affecting where it is placed absolutely if positioning based on the bottom.

如果您对底部应用正边距，这会扩展浏览器用于将底部定位在远离元素本身的线，在它与下面的任何相邻元素之间产生间隙，或者如果定位基于绝对影响它的位置底部。