CSS：顶部vs页边顶部

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

有人能解释一下为什么我会使用一个而不是另一个，以及它们的区别吗？

来自字节：

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

我的理解是，“边距顶部”在元素上创建边距，而“顶部”在偏移处将元素的上边缘设置在包含元素的上边缘之下

您可以在这里尝试：

---

只需将顶部替换为边距顶部即可查看差异

top

用于使用

position

属性调整元素。

margin top

用于测量相对于上一个元件到元件的外部距离

---

此外，

top

行为可能因位置类型不同而有所不同，

绝对

，

相对

或

固定

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

如果希望元素对周围的元素没有影响，可以使用定位（abs.，rel.）和

顶部

、

底部

、

左侧

和

右侧

设置

使用

相对定位

定位时，元素仍将像静态定位时一样占据其原始空间。这就是为什么如果从

静态

切换到

相对

位置，什么也不会发生。然后，您可以将其推过周围的元素

---

使用

absolute

定位，您可以从（静态）文档流中完全删除元素，因此它将释放它所占用的空间。然后，您可以自由地定位它，但要相对于环绕它的下一个最佳非静态定位元素。如果没有，它将被锚定到整个页面。

边距应用并扩展/收缩元素的法线边界，但调用top时忽略元素的常规位置并将其浮动到特定位置

例如：

html:

表示该元素将开始在其容器的50%高度显示html（即，显示单词“content”的div将在其包含div或html节点的50%高度显示在div#some_元素之前），但如果您打开浏览器的检查器（Windows上的f12或mac上的cmd+alt+i）将鼠标悬停在该图元上，您将看到其边界高亮显示，并注意到该图元已向下推，而不是重新定位

另一方面：

#some_element {top: 50%}

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

---

干杯

top属性是position属性。它与

位置

属性一起使用，例如

绝对

或

相对

<代码>页边距顶部是元素自己的属性。

那么什么时候应该使用页边距顶部？如果不是positioning@PərvizPiri这取决于你如何定位。这就是重点。我们通常使用边距顶部，除非我们使用绝对位置。下面的答案比我的好得多，也更完整。b当与相对位置一起使用时，

边距顶部

和

顶部

#some_element {margin-top: 50%}

#some_element {top: 50%}