CSS：顶部和边缘
我不确定是否完全理解这两者之间的区别。
有人可以解释为什么我会使用一个在另一个，他们有什么不同？
top是用于调整使用position属性的元素。
margin-top是用于测量元素的外部距离，与前一个相比。
此外， top行为可能会根据位置的types， absolute ， relative或fixed而有所不同。
如果您想要将（块）元素从文档stream中的其他元素移开，则可以使用边距。 这意味着它会推动下面的元素走下去。 请注意，相邻元素的垂直边缘会崩溃。
如果您希望元素对周围的元素没有影响，您可以使用定位（绝对，相对）以及top ， bottom ， left和right设置。
在relative定位的情况下，静态定位时，元素仍然占据原来的空间。 这就是为什么没有发生，如果你只是从static切换到relative位置。 从那里，你可以把它推过周围的元素。
通过absolute定位，您可以从（静态）文档stream中完全删除元素，从而释放占用的空间。 然后你可以自由地定位它 – 但是相对于下一个最好的非静态定位元素。 如果没有，它将被锚定在整个页面上。
保证金应用并扩展/收缩元素的正常边界，但当您调用顶部时，您将忽略元素的常规位置并将其浮动到特定位置。
例：
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或cmd + alt + i上的mac）并将鼠标hover在元素上，您将看到突出显示的边界，并注意元素已被按下而不是重新定位。
另一方面：
#some_element {top: 50%}
实际上将重新定位元素意味着它仍然会在其容器的50％处显示，但是将重新定位该元素，使得其边缘从其包含元素的50％开始。 换句话说，元素的边缘和容器之间会有间隙。
干杯!
从字节：
“边距是元素框的边缘与完整框的边缘之间的空间，例如字母的边距，”顶部“将元素的边缘从包含块框中移除，例如内部的同一张纸一个纸板箱，但它不能靠在容器的边缘。“
我的理解是，margin-top会在元素上创build一个边距，而top会将该元素的上边缘设置在包含元素上边缘的下方。
你可以在这里尝试：
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
只需用margin-topreplace顶部即可看出差异。
top属性是位置属性。 它与position属性一起使用，如absolute或relative 。 margin-top是元素自己的属性。
