CSS中的负边距如何工作以及为什么(保证金最高:-5!=保证金底部:5)？

Question

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

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

如在Chrome中一样在公制视图中看到,这就是您所看到的:

但是,当您将鼠标悬停在元素上时,没有描绘视觉边距,即边距位于边界"外部"并且可以显示.但负利润率并未出现.它们看起来如何,它与众不同之处是什么？

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

那么负利润如何运作以及它们背后的直觉是什么呢？他们如何"提升"(如果是margin-top < 0)一件物品？

Answer 1

负边距在css中有效,并且理解它们(兼容)行为主要基于框模型和边距折叠.虽然某些情况更复杂,但在研究规范后可以避免许多常见错误.

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

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

该保证金箱丢失8px的顶部,但是这并不影响内容和填充盒.因为您的元素是绝对定位的,所以向上移动元素8px不会对布局造成任何进一步的干扰; 静态插入内容并非总是如此.

奖金:

还是需要说服阅读规范是要走的路(而不是像这样的文章)？我看到你试图垂直居中这个元素,那你为什么要设置margin-top:-8px;而不是margin-top:-50%;？

好吧,CSS中的垂直居中比应该更难.以%为单位设置顶部或底部边距时,该值将计算为始终相对于包含块宽度的百分比.这是一个常见的陷阱,这个怪癖很少在w3 docos之外描述

Answer 2

我会尝试用肉眼解释它:

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

Answer 3

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

设置下边距表示您想要在当前块下方的距离.设置负上边距表示您希望在块上方显示负间距.负间距本身可能是一个令人困惑的概念,但只是积极的上边距推动内容的方式,负的上边距拉动内容.

Answer 4

保证金最高-8px意味着它比0保证金高8px.

8px的保证金底部意味着如果它有0保证金,那么它下面的东西将比8px更低.

Answer 5

这里已经做了很多好点,但是虽然有很多关于如何通过浏览器完成边距渲染的信息,但为什么还没有完全回答:

"为什么保证金最高:-8px与保证金底部不同:8px？"

我们还可以问的是:

为什么前面的元素没有正向底部边缘"上涨",而正面的利润空间"突然"跟随元素？

所以我们看到的是,边缘的渲染存在差异,这取决于它们应用的边 - 顶部(和左边)边距与底部(和右边)边缘不同.

当(简化)看一下浏览器如何应用样式时,事情变得越来越清晰:元素在视口中自上而下呈现,从左上角开始(现在让我们坚持使用垂直渲染,请记住水平的一个被处理相同).

考虑以下html:

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

类似于它们在代码中的位置,这三个框在浏览器中显示为"自上而下"(保持简单,我们不会在这里考虑ordercss3'flex-box'模块的属性).因此,每当样式应用于方框3时,前一个元素的位置(对于方框1和2)已经确定,并且为了提高速度不应再改变.

现在,想象一下盒子3的上边距为-10px,而不是将所有前面的元素向上移动以收集一些空间,浏览器只会将框3向上推,因此它会呈现在顶部(或下面,取决于z-index) )任何先前的元素.即使性能不是问题,向上移动所有元素也可能意味着将它们移出视口,因此必须改变当前的滚动位置以使所有元素再次可见.

同样适用于方框3的底部边距,包括负面和正面:不是影响已经评估的元素,而是确定即将到来的元素的新"起点".因此设定正的底部保证金将推动以下因素下降; 否定的人会推动他们.