CSS：顶部vs边缘顶部

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

有人可以解释为什么我会在另一个上使用它们吗？它们之间有何不同？

top用于通过使用position属性来调整元素。
margin-top用于测量相对于上一个元素到元素的外部距离。

此外，top行为可以依赖于位置，种类而不同absolute，relative或fixed。

如果要将（块）元素从文档流中的其他元素移开，则可以使用边距。这意味着它将把以下要素推开/进一步往下推。请注意，相邻块元素的垂直边距会折叠。

如果你想要的元素来对周围的元素没有影响，你会使用定位（绝对，相对）和top，bottom，left和right设置。

通过relative定位，该元素仍将像静态定位时一样占据其原始空间。这就是为什么只要切换static到relative位置就什么都不会发生的原因。从那里，您可以将其推过周围的元素。

通过absolute定位，您可以从（静态）文档流中完全删除该元素，从而可以释放其占用的空间。然后，您可以自由地放置它- 相对于围绕它缠绕的下一个最佳非静态放置的元素。如果没有，它将固定在整个页面上。

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

例：

的HTML：

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

CSS：

#some_element {margin-top: 50%}

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

另一方面：

#some_element {top: 50%}

实际上将重新放置元素，这意味着它仍将在其容器的50％处显示，但它将重新放置该元素，因此其边缘开始于其包含元素的50％。换句话说，该元件的边缘与其容器之间将存在间隙。

干杯!

该top属性是头寸属性。它与position诸如absolute或的属性一起使用relative。margin-top是元素本身的属性。

从字节：

“边距是元素框的边缘和整个框的边缘之间的空间，例如字母的边距。'top'将元素的边距边缘从包含块的框中移出，例如内部的同一张纸一个纸板箱，但它不紧靠容器的边缘。”

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

您可以在这里尝试：

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

只需将top替换为margin-top即可看到区别。