CSS 中的负边距是如何工作的? 为什么是(边距-顶部:-5! = 边距-底部: 5) ？

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

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

当你看到像 Chrome 一样的度量视图时，你会看到:

enter image description here

然而，当你悬停在元素上方时，没有可视化的边距，也就是说，边距在边界之外并且可以被可视化。但是负利润并没有出现。它们看起来如何，是什么使它们不同？

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

那么，负利润率是如何产生的? 它们背后的直觉是什么。它们如何“突起”(在 margin-top < 0的情况下)一个项目？

224258 次浏览
小开

边距 -8像素的顶部意味着它将高于8像素，如果它有0边距。

边距底部为8px 意味着如果边距为0，那么它下面的东西会向下延伸8px。

小开

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

设置底部边距指示当前块下方所需的距离。如果设置顶部边距为负，则表示希望在块上方设置负间距。负间距本身可能是一个令人困惑的概念，但正面的顶部边距推动内容向下，负面的顶部边距拉动内容向上。

小开

因为您使用了绝对定位，并指定了 top 百分比，所以只有页边距-top 会影响。项目对象。相反，如果你定位它使用底部: 50% ，那么你需要边际-底部 -8像素的中心，边际-顶部将没有任何效果。

从定位的角度来看，边距会影响元素的边界，无论是绝对的，还是相对于邻近元素。想象一下，边界是你的元素所在的基础。他们通常是相同的大小，但可以作出更大或更小的任何或所有的四个边缘。

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

在您的示例中，top 50% 将导致元素的顶部从页面中间开始。通过应用一个负的上边距，浏览器使用点8px 从顶部进入元素(即中间的线)作为位置在50% 。

如果你在底部应用一个正边距，这会延长浏览器用来定位底部的线条，使其远离元素本身，在它和下面的任何相邻元素之间留出一个间隙，或者如果基于底部定位，会影响它绝对放置的位置。

小开

我会试着用视觉来解释:

/**
* 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>

小开
最佳答案

负利润率在 css 中是有效的，理解它们(顺从)的行为主要是基于 盒子模型和利润率崩溃。虽然某些场景比较复杂，但是通过研究规范可以避免许多常见错误。

例如，示例代码的呈现遵循 计算绝对定位非替换元件的高度和边距中描述的 css 规范。

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

negative top margin

边框在顶部丢失了 8px，但是这并不影响 内容和填充框。因为您的元素是绝对定位的，所以将元素向上移动8px 不会对布局造成任何进一步的干扰; 对于静态流内容，情况并非总是如此。

意外收获:

仍然需要令人信服的阅读规格是 的的方式去(相对于 像这样的文章) ？我看到你试图垂直居中的元素，那么为什么你必须设置 margin-top:-8px;而不是 margin-top:-50%;？

在 CSS 中，垂直居中是 比正常情况更难。在% 中设置甚至 头儿或 底部边距时，该值计算为 总是相对于包含块的 < strong > width 的百分比。这是一个相当常见的陷阱，在 w3 docos 之外很少描述这种怪癖

小开

这里已经提到了一些好的观点，但是尽管有很多关于 如何边距渲染的信息是由浏览器完成的，但是 为什么还没有完全回答:

“为什么边距-顶部:-8px 不同于边距-底部: 8px?”

我们还可以问:

为什么正下边距不会在元素前面“上升”，而正上边距会在元素后面“下降”？

所以我们看到的是有一个 边距呈现的差异取决于应用它们的侧-顶部(和左边)的边距不同于底部(和右边)。

当我们(简化)了解浏览器是如何应用样式时，事情变得更加清晰: 元素从左上角开始在视图窗口中自上而下地呈现(现在让我们继续使用垂直呈现，记住水平呈现也是一样的)。

考虑下面的 html:

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

类似于它们在代码中的位置，这三个框在浏览器中显示为“自顶向下”堆叠(为了简单起见，这里我们不考虑 css3‘ flex-box’模块的 order属性)。因此，无论何时将样式应用到方框3，前面元素的位置(方框1和方框2)已经确定，不应该为了渲染速度而进行更改。

现在，想象一下框3的顶部边距为 -10px。浏览器不会移动前面的所有元素以获得一些空间，而只是将框3向上推，所以它被渲染在前面的任何元素的上面(或下面，取决于 z 索引)。即使性能不是问题，向上移动所有元素可能意味着将它们移出视图，因此当前的滚动位置将不得不改变，以使所有元素再次可见。

同样的情况也适用于方框3的底部边距，包括负边距和正边距: 不会影响已经计算好的元素，只会为即将到来的元素确定一个新的“起点”。因此，设置一个正的底部边距将推动 跟随元素向下，一个负的将推动他们向上。

小开

我想知道这个问题是否得到了很好的回答: css 边距是如何工作的，为什么它的边距-顶部:-5; 不同于边距-底部: 5; ？

边距是与元素周围环境的距离。页边距-top 表示“ ... 当我们从元素‘盒子’的顶部‘侧面’测量时与周围环境的距离，而页边距-bottom 表示从‘盒子’的底部‘侧面’测量的距离”。然后边距-顶部: 5; 关注顶部“侧面”周长，在这种情况下是 -5; 任何从顶部“侧面”接近的元素都可以与顶部“侧面”重叠5，边距-底部: 5; 表示元素底部“侧面”与周围之间的距离为5。

基本上，但受浮点元素和类似的影响: http://www.w3.org/TR/CSS2/box.html#margin-properties。

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

我愿意被纠正。

小开

只是用不同于上述伟大答案的措辞，因为这帮助我对负利润率有了直观的理解:

元素的负边距允许它占用其父容器的空间。

在底部添加一个(正)边距不允许元素这样做-它只会推回下面的任何元素。


提交答案