Question

我不确定我是否完全理解这两者之间的区别。

有人可以解释为什么我会使用其中一个以及它们有何区别？

Answer 1

如果要将（块）元素从文档流中的其他元素移开，则使用margin。这意味着它将推动以下元素远离/进一步向下。请注意，相邻元素的垂直边距会崩溃。

如果您希望元素对周围元素没有影响，您可以使用定位（绝对，相对）和top，bottom，left和{ {1}}设置。

使用right定位时，元素仍将占据原始空间，就像静态定位一样。如果您只是从relative切换到static位置，那就是没有任何反应的原因。然后，你可以将它推到周围的元素上。

使用relative定位，您可以从（静态）文档流中完全删除元素，这样就可以释放它占用的空间。然后你可以自由地定位它 - 但是 relative 到下一个最好的非静态定位元素。如果没有，它将被锚定到整个页面。

Answer 2

top用于调整使用position属性的元素 margin-top用于测量与元素相关的外部距离。

此外，top行为可能因位置类型absolute，relative或fixed而异。

Answer 3

边距适用并扩展/收缩元素的正常边界，但是当你调用top时，你忽略了元素的常规位置并将其浮动到特定位置。

示例：

HTML：

<div id="some_element">content</div>

的CSS：

#some_element {margin-top: 50%}

表示元素将开始在其容器的50％高度显示html（即显示单词“content”的div将在div＃some_element之前直接显示其包含div或html节点的50％高度）但是如果打开浏览器的检查器（在Windows上为f12或在mac上为cmd + alt + i）并将鼠标悬停在元素上，您将看到它的边界突出显示，并注意元素已被按下而不是重新定位。

另一方面，顶部：

#some_element {top: 50%}

实际上会重新定位元素，这意味着它仍将显示在其容器的50％处，但它将重新定位元素，使其边缘从其包含元素的50％开始。换句话说，元素边缘与其容器之间会有间隙。

干杯！

Answer 4

来自字节：

“边距是元素框边缘与整个框边缘之间的空格，例如字母边距。'top'将元素的边缘边缘从包含的块框中移位，例如同一块在纸板箱内的纸张，但它没有靠在容器的边缘。“

我的理解是margin-top在元素上创建了一个边距，top在偏移处将元素的上边缘设置在包含元素的上边缘之下。

你可以在这里试试：

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

只需用margin-top替换顶部即可看出差异。

Answer 5

top属性是位置属性。它与position属性一起使用，例如absolute或relative。 margin-top是元素自己的属性。

Answer 6

我在想同样的事情。如果有人想玩的话，我创建了一个Codepen。

CSS：

.container {
    margin-top: -70px;
}


.category {
    top: -12px;
    position: absolute;
}

CSS：Top vs Margin-top

6 个答案: