CSS: Top vs Margin-top

Question

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

有人可以解释一下为什么我会使用其中一个而不是另一个，它们如何不同？

- Jason

Answer 1

如果您想将（块）元素从文档流中的其他元素移开，可以使用 margin。这意味着它会将后续元素推开/向下移动。请注意，相邻块元素的垂直边距会折叠。

如果您希望该元素不对周围元素产生影响，则应使用定位（abs、rel）以及 top、bottom、left 和 right 属性设置。

使用相对定位时，元素仍将占据其静态位置。因此，如果您只是从 static 切换到 relative 位置，则不会发生任何事情。从那里，您可以将其推动到周围元素。

使用绝对定位时，您会完全将元素从（静态的）文档流中删除，因此它将释放其所占用的空间。然后，您可以自由地进行定位 - 但是与包裹它的下一个最佳非静态定位元素有关。如果没有这样的元素，则它将锚定在整个页面上。

- DanMan

Answer 2

top用于通过使用position属性来微调元素。
margin-top用于测量与前一个元素相关的外部距离。

此外，top的行为取决于定位类型，absolute、relative或fixed。

- Davis Peixoto

---

那么什么情况下我们应该使用margin-top呢？如果不涉及定位的话。 - user12997933

@PərvizPiri 这取决于你的定位方式。这就是关键所在。通常我们使用margin-top，除非我们使用绝对定位。 - Davis Peixoto

下面的答案比我的好得多，而且更完整。顺便说一句。 - Davis Peixoto

Answer 3

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

示例：

html：

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

层叠样式表：

#some_element {margin-top: 50%}

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

另一方面，Top：

#some_element {top: 50%}

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

干杯！

- DrewT

---

“margin” 属性中的百分比是根据容器的宽度计算的。因此，“margin-top: 50%” 实际上意味着顶部边距将等于该容器宽度的50％（而不是高度的50％）：）。这意味着元素将从其容器的50％高度开始显示 HTML。https://dev59.com/fVsW5IYBdhLWcg3wqo0x:~:text=Percent%2Dbased%20margins%20are%20calculated,to%2050%25%20of%20the%20width. - chess_madridista

Answer 4

top属性是一个定位属性，它与position属性一起使用，如absolute或relative。而margin-top是元素自身的属性。

- lin

---

使用相对定位时，margin-top和top之间有什么区别吗？ - mr.loop

Answer 5

从字节：

"Margin是元素框的边缘和完整框之间的空间，例如信件的边缘。'top'将元素的边距边缘从包含块框的边缘移开，例如同一张纸在纸板箱内，但它不贴着容器的边缘。"

我的理解是margin-top在元素上创建一个边距，而top设置元素的顶部边缘在偏移量下方处于包含元素的顶部边缘。

你可以在这里尝试：

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

只需用margin-top替换top就可以看到差异。

- Brandon Frohbieter

Answer 6

这是我的理解...

TOP: 它定义了元素相对于自身元素或其他元素的位置，即在相对定位中，top是相对于其自身元素进行比较，而在固定定位中，top是相对于视口进行比较。

Margin_Top: 它始终是相对于其自身元素的，它会向其边框添加一个偏移量（外部）。

- Hopeman

---

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Halo

Answer 7

• top: 它是从内容框的顶部定位
• margin-top: 它是距离边框框或前一个兄弟元素的间隙或空间

<div class="text"></div>

.text {
  top: 50%;
} 

- vishnu pratap singh