CSS：顶部与边距顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4036176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Top vs Margin-top
提问by Jason
I'm not sure if I fully understand the difference between these two.
我不确定我是否完全理解这两者之间的区别。
Can someone explain why I would use one over the other and how they differ?
有人可以解释为什么我会使用一个而不是另一个以及它们有什么不同吗？
采纳答案by Dave
topis for tweak an element with use of positionproperty.margin-topis for measuring the external distance to the element, in relation to the previous one.
top用于使用position属性调整元素。margin-top用于测量与前一个元素相关的元素的外部距离。
Also, topbehavior can differ depending on the type of position, absolute, relativeor fixed.
此外，top行为可能因位置absolute、relative或的类型而异fixed。
回答by DanMan
You'd use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it'd push the following elements away / further down. Be aware that vertical margins of adjacent block elements collapse.
如果您想将一个（块）元素从文档流中的其他元素移开，您将使用边距。这意味着它会将以下元素推开/进一步向下。请注意，相邻块元素的垂直边距会塌陷。
If you wanted the element to have no effect on the surrounding elements, you'd use positioning (abs., rel.) and the top, bottom, leftand rightsettings.
如果您希望元素对周围的元素没有影响，您可以使用定位 (abs., rel.) 和top, bottom,left和right设置。
With relativepositioning, the element will still occupy its original space as when positioned statically. That's why nothing happens, if you just switch from staticto relativeposition. From there, you may then shove it across the surrounding elements.
使用relative定位时，元素仍会像静态定位时一样占据其原始空间。这就是为什么没有任何反应，如果你只是切换static到relative位置。从那里，您可以将其推过周围的元素。
With absolutepositioning, you completely remove the element from the (static) document flow, so it will free up the space it occupied. You may then position it freely - but relativeto the next best non-statically positioned element wrapped around it. If there is none, it'll be anchored to the whole page.
通过absolute定位，您可以从（静态）文档流中完全删除元素，因此它将释放它占用的空间。然后您可以自由定位它 - 但相对于包裹在它周围的下一个最佳非静态定位元素。如果没有，它将锚定到整个页面。
回答by DrewT
Margin applies and extends / contracts the element's normal boundary but when you call top you are ignoring the element's regular position and floating it to a specific position.
Margin 应用并扩展/收缩元素的正常边界，但是当您调用 top 时，您将忽略元素的常规位置并将其浮动到特定位置。
Example:
例子：
html:
html：
<div id="some_element">content</div>
css:
css：
#some_element {margin-top: 50%}
Means the element will begin displaying html at the 50% height of its container (i.e. the div displaying the word "content" would be displayed at 50% height of its containing div or html node directly before div#some_element) but if you open your browser's inspector (f12 on Windows or cmd+alt+i on mac) and mouse over the element you will see it's boundaries highlighted and notice the element has been pushed down rather than re-positioned.
意味着元素将在其容器的 50% 高度处开始显示 html（即，显示“内容”一词的 div 将直接在 div#some_element 之前显示在其包含的 div 或 html 节点的 50% 高度处）但如果你打开你的浏览器的检查器（Windows 上的 f12 或 Mac 上的 cmd+alt+i）并将鼠标悬停在元素上，您将看到它的边界突出显示，并注意到该元素已被按下而不是重新定位。
Top on the other hand:
另一方面：
#some_element {top: 50%}
Will actually reposition the element meaning it will still display at 50% of its container but it will reposition the element so its edge starts at 50% of its containing element. In other words, there will be a gap between the edges of the element and its container.
实际上会重新定位元素，这意味着它仍将显示在其容器的 50% 处，但它会重新定位元素，使其边缘从其包含元素的 50% 开始。换句话说，元素的边缘和它的容器之间会有一个间隙。
Cheers!
干杯!
回答by lin
The topproperty is a position property. It is used with the positionproperty, such as absoluteor relative. margin-topis an element's own property.
该top属性是一个位置属性。它与position属性一起使用，例如absoluteor relative。margin-top是元素自己的属性。
回答by Orbit
from bytes:
从字节：
"Margin is that space between the edge of an element's box and the edge of the complete box, such as the margin of a letter. 'top' displaces the element's margin edge from the containing blocks box, such as that same piece of paper inside a cardboard box, but it is not up against the edge of the container."
“边距是元素框的边缘和完整框的边缘之间的空间，例如字母的边距。'top' 将元素的边距边缘从包含块框的框中移开，例如里面的同一张纸一个纸板箱，但它没有紧贴容器的边缘。”
My understanding is that margin-top creates a margin on the element, and top sets the top edge of the element below the top edge of the containing element at the offset.
我的理解是 margin-top 在元素上创建一个边距，而 top 将元素的顶边设置在偏移处包含元素的顶边之下。
you can try it here:
你可以在这里尝试：
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
just replace top with margin-top to see the difference.
只需将 top 替换为 margin-top 即可查看差异。
