问CSS:顶部vs页边距-顶部

EN

top用于使用position属性调整元素。

margin-top用于测量与前一个元素相关的外部距离。

此外，根据位置的类型( absolute、relative或fixed )，top行为可能会有所不同。

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

示例：

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或mac上的cmd+alt+i )并将鼠标放在元素上，您将看到它的边界高亮显示，并注意到元素已被下推而不是重新定位。

另一方面，顶部：

#some_element {top: 50%}

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

干杯!

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