Question

使用顶部和左侧属性以及左上边距和左上边距有什么区别？

我知道顶部和左部通常用于位置：绝对情况但我仍然想知道是否有任何重大差异。

例如：

position:absolute;
top:5px;
left:5px;

-vs -

margin-top:5px;
margin-left:5px;

Answer 1

嗯，主要区别在于绝对定位的元素被拉出内容流。

但是对于相对定位的元素，周围的内容可能会变得混淆。

另一方面，边距会添加到元素的大小，而周围的内容会相应地流动。

请参阅this sample fiddle，但有一些差异。

当然，有些情况下两者都会产生相同的结果，但在正常情况下，这两种方法不仅可以交换，也不具有可比性。

Answer 2

保证金描述了您的盒子和相邻盒子之间的空间。相对定位的盒子（即正常流动的一部分）将在它们之间保持足够的空间，满足每个人的“边缘”要求（称为“边缘坍塌”）。

另一方面，

top和left是位置属性，用于指定您的框所在的位置;对于绝对定位的盒子，值是相对于最近的包含盒子取的，盒子本身是绝对定位的。顶部/左侧/底部/右侧属性指定框的相应边缘的位置，包括其边距。

简而言之，两者是完全不同的概念。对于通常流动的盒子，您应该使用margin来控制相邻盒子之间的间距。

Answer 3

A 存在语义差异。像top这样的框偏移指定框的边缘边缘（下图中的虚线边缘）偏离参考边缘的距离（对于绝对定位的元素，这是框的包含块的上边缘）。像margin-top这样的保证金属性指定了一个框的边距区域的宽度（虚线边缘与下图中的实线边缘之间的距离TM）。

Box model

B top和left仅适用于定位元素（position设置为static以外的任何内容的元素）{{1} }和margin-top适用于除table-caption，table和inline-table之外的表格显示类型的元素以外的所有元素。