CSS：顶VS边距CSS：顶VS边距(CSS: Top vs Margin-top)

我不知道如果我完全理解这两者之间的区别。

有人可以解释为什么我会用一个比其他和他们有什么不同？

Answer 1:

top是与使用的调整元件position属性。
margin-top是用于测量所述外部距离到元件，相对于前一个。

此外， top行为可以依赖于位置，种类而不同absolute ， relative或fixed 。

Answer 2:

你会使用保证金，如果你想从文档流等元素移开一（块）元素。 这意味着它会推动以下元素远/进一步下跌。 注意相邻元素崩溃的是垂直空间。

如果你想要的元素来对周围的元素没有影响，你会使用定位（绝对，相对）和top ， bottom ， left和right设置。

与relative定位时，该元件仍然占据其原始空间时静态地定位为。 这就是为什么没有任何反应，如果你只是切换从static到relative位置。 从那里，你可以接着推它整个周围的元素。

凭借absolute定位，您完全删除从（静态）文件流的元素，所以它会释放其占用的空间。 然后，您可以自由放置它-但是相对于它周围包裹下一个最好的非静态定位的元素。 如果没有，它会被固定在整个页面。

Answer 3:

余量适用和扩展/收缩元素的正常边界，但是当你打电话顶部被您忽略的元素的正常位置，它漂浮到特定位置。

例：

HTML：

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

CSS：

#some_element {margin-top: 50%}

意味着元素将开始在其容器的50％的高度显示HTML（即股利显示“内容”一词将在直接的div＃some_element前的含股利或HTML节点的50％的高度来显示），但如果你打开你的浏览器的检查器（F12键（Windows）或CMD + ALT +我在Mac）和鼠标在元素上，你会看到它的边界突出，并注意元素已被按下，而不是重新定位。

本日热门另一方面：

#some_element {top: 50%}

将实际重新定位元件这意味着它仍然会显示在它的容器的50％，但因此其边缘在其包含的元素的50％的启动时，它将重新定位的元件。 换句话说，将有元素及其容器的边缘之间的间隙。

干杯!

Answer 4:

从字节：

“保证金是一个元件的盒子的边缘和完整框，诸如字母的边缘的边缘之间的空间。‘顶部’从含块框位移元素的余量边缘，如内部的同一张纸上一个纸箱，但它不涨反容器的边缘“。

我的理解是边距创建元件上的裕度，并且顶部设置在偏移的含元件的顶部边缘下方的元件的顶部边缘。

你可以在这里尝试一下：

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

刚刚更换的margin-top顶部看到其中的差别。

Answer 5:

该top属性是一个位置属性。 它用于与position属性，例如absolute或relative 。 margin-top是元素的自有财产。

文章来源: CSS: Top vs Margin-top