Question

如果我写了这个：

#element {
  margin-top: -50px;
}

按照一般规则，它会将元素向上移动50个像素。

最近，我不小心使用了这段代码：

.elements {
  margin: -50px;
}

所以我有了这些<div>个标签，一个在另一个之下，并且通过写margin: -50px;它们都以某种方式靠近在一起。

但回想起来，我真的不知道这是如何运作的。元素的大小没有改变（据我所知，因为它们包含子元素，并且子元素也更紧密），它们似乎没有放大或任何东西。

我在网上进行了一些研究，但我发现的最多只是一侧或两侧的负利润。

对此有解释吗？究竟发生了什么？也许是因为我使用谷歌浏览器，也许在其他浏览器中没有任何事情发生？

Answer 1

Tha margin不会添加到元素的外观，而是添加到 bounds ，所以基本上你的元素看起来像200x200但是它的边界等于100x100元素的边界，因为你从每一边减去50px。亲自尝试一下：

Fiddle here

HTML：

<div class="e1"><div></div></div>
<div class="e2"><div></div></div>

CSS：

body {
    padding: 100px;
}
div {
    width: 200px;
    height: 200px;
    float: left;
    margin: -50px;
}

.e1 {
    background: red;
}

.e2 {
    background: yellow;
}

.e1>div, .e2>div {
    width: 100px;
    height: 100px;
    outline: 1px solid blue;
    margin: 50px;
}

我已经在身体上添加了一个填充物，以便将元素向下推，这样你就可以看到它们引起的重叠。更新，以便您可以看到结果的方块的边界。

CSS中所有四方都有负面利润？

1 个答案: