负边际的概念 - 我明白了吗？

Question

我读到负边距 - 顶部和左边取得元素并将其推向这个方向。另一方面，负底部和右边距将剩余的内容绘制在元素上。

问题

我有浮动元素浮动：右;包裹在身体标签中。负左边距将向左移动。

负的右边距根本不会做任何事情，因为文件在这个负边距开始的地方结束，并且没有任何东西可以在元素上绘制（或拉过它）？

我是对的吗？

Answer 1

负边距将始终与块边框相同，与正边距相同。他们只是沿着正边距相反的方向移动一个盒子和/或周围的盒子。哎呀，负利润率甚至可以collapse。

如果发生任何溢出，则相关的框将调整并适应此框的移动。

如果一个元素在某个方向浮动，那么它向上浮动的一侧的边距将对其自身的位置产生影响，而相对位置的边距将相对于任何后续的浮动影响它。 / p>

  

负的右边距根本不会做任何事情，因为文档在此负边距开始的地方结束并且没有任何内容可以覆盖元素（或拉过它）？

没有。有一个叫做canvas的东西，它在理论上有无限的扩展空间。有一个边距推出一个元素从页面正文或页面根目录？ NBD，只需在该方向上展开画布，在视口中创建一个滚动条，用于显示此画布，并完成。

就像你的父元素为overflow: auto的元素有一个负边距一样，因为the root element itself has overflow: auto by default（因为你真的没有东西明显溢出浏览器窗口本身......）

jsFiddle proof-of-concept

Answer 2

负右边距肯定有效！ http://fiddle.jshell.net/H6mjC/

Answer 3

也是一个小提琴。当然负利润率正在发挥作用。

fiddle with negative margin

enter code here

Answer 4

许多人都认为对负利润存在同样的误解。您描述的行为倾向于匹配许多负边缘情况，但它从一个有缺陷的角度解释它们。实际上，负边距对框的任何侧具有相同的效果，但不会在＆＃34;移动框＆＃34;或＆＃34;在＆＃34;中绘制其他内容。

例如，left-margin: -20px表示＆＃34;将元素定位，就好像它的左边缘距离其真正的左边缘'＃34;向内20像素一样。 right-margin: -20px表示完全相同的东西，但右边缘。

在您提供的简单描述中，负左边距确实会将元素本身向左移动，因为其左边缘与前一个元素右边缘相邻，但浏览器假装我们元素的左边缘实际上是向右移动 ，因此元素本身的内容显示为向左移动。

如果右边距为负，浏览器会将下一个元素的左边缘放置在我们元素的右边缘附近，但它会假装我们元素的右边缘向向左移动，因此下一个元素本身显示为向左移动。

在这两种情况下，唯一改变的是浏览器对元素边缘位置的概念。

当你有一个右浮动元素时，浏览器会将它定位，使其右边缘与前一个右浮动元素的左边缘相邻，或者如果没有先前右浮动元素，它将与其位置父级的右侧边缘相邻（这是最接近的父级元素，其position样式不是static。在您的情况下，您没有前一个右浮动元素，因此浏览器会定位您的元素，使其右边缘与父右边缘< / em>，但它假装你的元素的右边缘被移动向左，所以你的实际内容被向右移动，突出到父元素之外。

Here is a demonstration。带有蓝色边框的框具有负左右边距。其中的黄色框表示浏览器如何考虑它 - 它比蓝色边框更窄，因为负边距告诉浏览器向内移动其边缘，从元素的实际大小开始。正如您所看到的，它的定位盒的放置方式与任何元素完全相同，两侧都有触摸它的左右兄弟。并且实际内容在两个方向上延伸的数量完全相同，因为它的负边距是相同的。 感知更改是元素本身由于其左边距而向左移动，并且后续内容由于其右边距而向左移动，但正如您所看到的，实际上，效果恰好是双方都一样。