首页 文章

CSS中的负边距如何工作以及为什么（保证金最高：-5！=保证金底部：5）？

提问于
浏览 次
92

垂直定位元素的常见技巧是使用以下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 不一样？

那么负边距如何工作以及's the intuition behind them. How do they '如何提升（在 margin-top < 0 的情况下）一个项目？

css margin

7 回答

  • 72

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

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

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

    negative top margin

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

    Bonus:

    仍然需要说服阅读规范是要走的路（而不是articles like this）？我看到你试图垂直居中元素，为什么你要设置 margin-top:-8px; 而不是 margin-top:-50%; ？

    好吧，CSS中的垂直居中是harder than it should be . 以％为单位设置 top 或 bottom 页边距时，该值计算为a percentage always relative to the width of the containing block . 这是一个常见的陷阱，这个怪癖很少在w3 docos之外描述

    回复于
  • 27

    我会尝试用肉眼解释它：

    /**
 * 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>
    回复于
  • 3

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

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

    回复于
  • 66

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

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

    回复于
  • 18

    这里已经有了很多好处，但是有很多关于 how 边缘渲染的信息是由浏览器完成的， why 还没有完全回答：

    “为什么保证金最高：-8px与保证金底部不同：8px？”

    我们还可以问的是：

    为什么前面的元素没有正向底部上涨，而正面的上边缘“突然”跟随元素？

    所以我们看到有一个 difference in the rendering of margins depending on the side they are applied to - 顶部（和左侧）边距与底部（和右侧）边缘不同 .

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

    考虑以下html：

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

    类似于它们在代码中的位置，这三个框在浏览器中显示堆叠'top-down'（保持简单，我们不会在这里考虑css3 'flex-box'模块的 order 属性） . 因此，每当样式应用于方框3时，为了渲染速度，先前的元素's positions (for box 1 and 2) have already been determined, and shouldn' t将被更改 .

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

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

    回复于
  • 15

    由于您使用了绝对定位并指定了最高百分比，因此只有margin-top会影响.item对象的位置 . 如果你用底部定位它：50％，那么你需要margin-bottom -8px来使它居中，而margin-top将没有效果 .

    边距在定位方面会影响元素的边界，或者与您的情况完全相同，或者相对于相邻元素 . 想象一下，保证金是您所在元素的基础 . 它们通常具有相同的尺寸，但可以在四个边缘中的任何一个或全部上变大或变小 .

    您的CSS告诉浏览器将元素的顶部定位在页面向下50％处的边距 . 但是，由于所有元素都不是单个像素，因此浏览器需要知道它的哪一部分排在页面的50％左右 . 为了排列元素的顶部，它使用上边距 . 默认情况下，这与元素的顶部一致，但您可以使用CSS更改它 .

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

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

    回复于
  • 2

    我想知道这个问题是否得到了很好的解答：css边距是如何工作的，为什么它是边缘上限：-5;与margin-bottom不同：5;？

    边距是元素周围的距离 . margin-top表示“......我们从元素'盒'的顶部'侧'测量距离周围的距离，而边距底部是'盒子'的底部'侧'的距离” . 保证金最高：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/

    我有待纠正 .

    回复于

相关问题