负边际的概念--我理解了吗？

Question

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

问题

我有一个浮动元素float:right；包装在body标记中。左边距为负将使其向左移动。

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

我说的对吗？

Answer 1

许多人对负利润率有同样的误解。你描述的行为往往与许多负边际案例相匹配，但它是从一个有缺陷的角度来解释它们。实际上，负边距在方框的任何一侧都有相同的效果，但不是在“移动方框”或“在其中绘制其他内容”方面。

例如，left-margin: -20px意味着“定位元素的位置，就好像它的左边缘距其真正的左边缘向内20个像素”。right-margin: -20px的含义是完全相同的，但是是针对正确的边缘。

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

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

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

当具有右浮动元素时，浏览器将对其进行定位，使其右边缘与上一个右浮动元素的左边缘相邻，或者，如果没有前一个右浮动元素，则它将与其位置父元素(这是position样式不是static的最接近的父元素)的右边缘相邻。在本例中，您没有以前的右浮动元素，所以浏览器定位您的元素，使其右边缘与父元素的右边缘相邻，但它假装您的元素的右边缘向左移动，因此实际内容向右移动，突出到父元素之外。

Here is a demonstration。蓝色边框的左边距和右边距均为负值。它里面的黄色方框代表浏览器如何考虑它-它比蓝色边框更窄，因为负边距告诉浏览器将其边缘向内移动，吃掉元素的实际大小。正如您所看到的，它的定位框的放置方式与任何元素的放置方式完全相同，与其左右两侧的兄弟元素相接触。实际内容在两个方向上扩展的量是完全相同的，因为它的负边距是相同的。可感知的变化是，元素本身由于左边距而向左移动，后面的内容由于右边距而向左移动，但正如您所看到的，实际上两边的效果是完全相同的。

Answer 2

负边距将始终以与正边距相同的方式对块框起作用。它们只是在与正边距相反的方向上移动一个框和/或周围的框。见鬼，负边际甚至可以collapse。

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

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

负右边距根本不会做任何事情，因为文档在这个负边距开始的地方结束，并且没有任何东西可以画到元素上(或拖到上面)？

不是的。有一种叫做canvas的东西，理论上它有无限的扩展空间。将一个元素从页面主体或页面根中推出时，会出现边距问题吗？NBD，只需在该方向上展开画布，在用于显示此画布的视口中生成一个滚动条，然后完成。

这与父元素具有overflow: auto的元素上的边距为负值是一样的，因为the root element itself has overflow: auto by default (因为您实际上不可能有明显溢出浏览器窗口本身的内容...)。

jsFiddle proof-of-concept

Answer 3

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