CSS：顶部与顶部边缘
我不确定我是否完全理解这两者之间的区别。
有人可以解释为什么我会使用其中一种而不是另一种以及它们有何不同吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
如果您想将一个（块）元素从文档流中的其他元素移开，您可以使用边距。这意味着它将把以下元素推开/进一步向下。请注意，相邻块元素的垂直边距会折叠。
如果您希望元素对周围元素没有影响，则可以使用定位（绝对、相对）和
top、bottom、left和右设置。通过相对定位，元素仍将占据其静态定位时的原始空间。这就是为什么如果您只是从
static位置切换到relative位置，什么也不会发生。从那里，您可以将其推过周围的元素。使用
绝对定位，您可以从（静态）文档流中完全删除该元素，因此它将释放它所占用的空间。然后，您可以自由定位它 - 但相对于围绕它的下一个最佳非静态定位元素。如果没有，它将锚定到整个页面。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,leftandrightsettings.With
relativepositioning, the element will still occupy its original space as when positioned statically. That's why nothing happens, if you just switch fromstatictorelativeposition. From there, you may then shove it across the surrounding elements.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 relative to the next best non-statically positioned element wrapped around it. If there is none, it'll be anchored to the whole page.top用于使用position属性调整元素。margin-top用于测量元素相对于前一个元素的外部距离。此外，
top行为可能会有所不同，具体取决于位置类型：绝对、相对或固定。topis for tweak an element with use ofpositionproperty.margin-topis for measuring the external distance to the element, in relation to the previous one.Also,
topbehavior can differ depending on the type of position,absolute,relativeorfixed.边距应用并扩展/收缩元素的正常边界，但是当您调用 top 时，您将忽略元素的常规位置并将其浮动到特定位置。
示例：
html:
css：
表示元素将在其容器的 50% 高度处开始显示 html（即，显示单词“content”的 div 将在其包含的 div 或 html 节点的 50% 高度处显示，直接位于 div#some_element 之前）但是如果您打开浏览器的检查器（在 Windows 上按 f12 或在 Mac 上按 cmd+alt+i）并将鼠标悬停在该元素上，您将看到它的边界突出显示，并注意到该元素已被推下而不是重新定位。
另一方面，顶部：
实际上会重新定位元素，这意味着它仍将显示在其容器的 50% 处，但它将重新定位元素，使其边缘从其包含元素的 50% 处开始。换句话说，元素的边缘与其容器之间会有间隙。
干杯!
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.
Example:
html:
css:
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.
Top on the other hand:
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.
Cheers!
top属性是一个位置属性。它与position属性一起使用，例如absolute或relative。margin-top是元素自己的属性。The
topproperty is a position property. It is used with thepositionproperty, such asabsoluteorrelative.margin-topis an element's own property.from bytes:
“边距是元素框的边缘与整个框的边缘之间的空间，例如字母的边距。‘top’将元素的边距边缘从包含块框中替换，例如同一个块纸板箱内有纸张，但没有抵住容器的边缘。”
我的理解是，margin-top 在元素上创建一个边距，而 top 将元素的上边缘设置在包含元素的上边缘下方的偏移量处。
您可以在这里尝试：
http://w3schools.com/css/tryit.asp? filename=trycss_position_top
只需将 top 替换为 margin-top 即可看到差异。
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."
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.
you can try it here:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
just replace top with margin-top to see the difference.
这是我的理解...
TOP：它定义了元素相对于它自己的元素或其他元素的位置，即相对顶部是指与它自己的元素进行比较，而在固定顶部是指与视口进行比较。
Margin_Top：它总是引用它自己的元素，并在其边框上添加偏移量（外部）
This is my understanding...
TOP: it defines the position of the element wrt its own elements or other element i.e in case of relative top refers to compare with its own element whereas in fixed top refers to compare with viewport.
Margin_Top: it always refer to its own elements that adds an offset(outside) to its border
top：它从内容框的顶部定位margin-top：它与边框框或前面的同级元素有间隙或空间top: it is positioning from top of content boxmargin-top: it is gap or space away from border box or preceding sibling element