为什么在CSS中的负边距工作，为什么是（margin-top：-5！= margin-bottom：5）？
垂直定位元素的常见技巧是使用以下CSS：
.item { position:absolute; top:50%; margin-top:-8px; /* half of height */ height: 16px; } 在公制视图中看到的情况如下所示：
但是，当您将鼠标hover在元素上时，并没有显示可视边距，即边距在“边界之外”并且可以被显示。 但负利润率不会显现。 他们如何看，是什么使它不同？
为什么margin-top:-8px 与 margin-bottom:8px 不一样 ？
那么负利润率是如何工作的呢？他们背后的直觉是什么？ 他们如何“碰撞”（如果margin-top < 0 ）项目？
负边界在CSS中是有效的，并且理解它们（顺应性）的行为主要基于框模型和边缘折叠。 虽然某些场景比较复杂，但研究规范后可以避免很多常见的错误。
例如，渲染示例代码是由css规范引导的，如计算绝对定位的非replace元素的高度和边距所述。
如果我要做一个graphics表示，我可能会用这样的东西（不按比例）：
8px在顶部丢失8px ，但是这不影响内容和填充框 。 因为你的元素是绝对定位的，移动元素8px不会对布局造成任何进一步的干扰; 与静态stream入内容并不总是如此。
奖金：
还是需要说服阅读规范是要走的路（而不是像这样的文章 ）？ 我看到你正在试图垂直居中元素，那么为什么你必须设置margin-top:-8px; 而不是margin-top:-50%; ？
那么，CSS中的垂直居中比应该更困难 。 在以％为单位设置顶部或底部边距时，该值的计算方式是始终相对于包含块的宽度的百分比 。 这是一个很常见的陷阱，这个怪癖在w3 docos之外很less被描述
我会试着用视觉来解释
/** * 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>
边距是元素外的间距，就像填充元素内部的间距一样。
设置底部边距表示您在当前块下面想要的距离。 设置一个负的上边距表示你希望在你的区块之上有负的间距。 负间距本身可能是一个令人困惑的概念，但正顶边距将内容往下推，负顶边距则将内容拉出。
8px的margin-top意味着比margin 0的margin高8px。
8px的margin-bottom意味着下面的东西将会是8px，如果它有0 margin。
这里已经有了很好的观点，但是关于如何通过浏览器来实现页边空白的信息有很多，但是为什么还没有完全回答：
“为什么margin-top：-8px与margin-bottom：8px不一样？
我们也可以问的是：
为什么没有一个积极的底部边缘“冲击”前面的元素，而积极的顶部边缘“冲击”下面的元素？
所以我们所看到的是根据应用边的不同，边缘的渲染是有区别的 – 顶部（和左边）边距与底部（和右边）不同。
（简化的）看看浏览器是如何应用样式的时候，事情变得更加清晰：元素在视口中自上而下（从左上angular开始）（让我们坚持现在的垂直渲染，记住水平的一个是相同的）。
考虑下面的html：
<div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
类似于它们在代码中的位置，这三个框在浏览器中显示为“自顶向下”堆栈（ 保持简单，我们不考虑css3'flex-box'模块的order属性 ）。 所以每当样式被应用到方框3时，前面元素的位置（对于方框1和2）已经被确定，并且为了渲染速度而不应该被改变。
现在，想象一下box 3的顶部边距为-10px，而不是将所有前面的元素向上移动来收集一些空间，浏览器只会将box 3向上推，所以它被渲染在顶部（或底部），这取决于z-index ）任何前面的元素。 即使性能不是问题，将所有元素移动到视口中也是可能的，因此当前的滚动位置将不得不被改变，以使所有事物都可见。
这同样适用于方框3的底部边界，既有正面的也有正面的：不是影响已经评估过的元素，只是确定了即将到来的元素的一个新的“起始点”。 因此设置一个积极的底部空白将推动下面的元素; 负面的会推动他们。
由于您使用了绝对定位，并指定了最高百分比，因此只有margin-top会影响.item对象的位置。 如果您使用bottom：50％来定位它，那么您需要margin-bottom -8px将其居中，而margin-top将不起作用。
保证金在定位时会影响元素的边界，或者与您的情况完全相同，或者与相邻元素相关。 想象一下，保证金是你所处的元素的基础。 它们通常与它的尺寸相同，但是可以在四个边的任何一个或全部上制作得更大或更小。
您的CSS会告诉浏览器将元素的顶部放置在页面向下的50％处。 但是，由于所有元素都不是一个像素，所以浏览器需要知道哪个部分排列在页面的下方50％。 为了排列元素的顶部，它使用顶部边距。 默认情况下，这与元素的顶部一致，但你可以用CSS来改变它。
在你的情况下，前50％将导致在页面中间开始元素的顶部。 通过应用负顶部边距，浏览器将顶点（即横过中间的线）的点8px作为放置在50％的位置。
如果在底部应用正边距，则会延长浏览器用于将底部定位在元素本身之外的位置，并在底部与相邻元素之间留有间隙，或者如果定位基于底端。
我不知道这个问题是否得到了很好的回答：边际利润率如何，边缘利率为什么如此：-5; 不像margin-bottom：5;？
边距是元素周围的距离。 margin-top表示“…从元素'box'的顶部'side'测量距离环境，margin-bottom是'box'的底部'side'的距离。 然后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/
我立场纠正。
