【发布时间】：2011-09-19 03:36:44
【问题描述】：
使用 top 和 left 属性与使用 top 和 left margin 有什么区别？
我知道 top 和 left 通常用于 position:absolute 情况，但我仍然想知道是否有任何重大区别。
例如：
position:absolute;
top:5px;
left:5px;
-vs-
margin-top:5px;
margin-left:5px;
【问题讨论】：
【发布时间】：2011-09-19 03:36:44
【问题描述】：
边距描述了您的框与相邻框之间的空间。相对定位的盒子（即作为正常流程的一部分）将在它们之间保持足够的空间，以满足每个人的“边距”要求（称为“边距折叠”）。
另一方面，top 和 left 是 positional 属性，用于指定 where 你的盒子所在的位置；对于绝对定位的盒子，这些值是相对于最近的包含盒子本身绝对定位的。 top/left/bottom/right 属性指定盒子各个边缘的位置，包括它的边距。
简而言之，两者是完全不同的概念。对于正常流动的盒子，您应该使用margin 来控制相邻盒子之间的间距。
【讨论】：
-
only for boxes that are positioned relatively... Margin values are ignored on absolutely positioned boxes不正确。保证金适用于所有头寸类型。 -
@Jeff：“作品”是什么意思？边距对绝对定位的框有什么影响？ 编辑：哦，是的，你当然是对的，绝对定位中包含边距。谢谢！我会更新帖子。
嗯，主要区别在于绝对定位的元素会从内容流中提取出来。
但是对于相对定位的元素，周围的内容可能会变得模糊。
另一方面，边距被添加到元素的大小，而周围的内容相应地流动。
见this sample fiddle 有一些区别。
当然，在某些情况下两者都提供相同的结果，但在正常情况下，这两种方法不能简单地互换或比较。
【讨论】：
A存在语义差异。像top 这样的框偏移指定框的边缘边缘（下图中的虚线边缘）与参考边缘的偏移量（对于绝对定位的元素，这是框包含块的顶部边缘）。 margin-top 等边距属性指定框的边距区域的宽度（下图中虚线边与实线边之间的距离 TM）。
B top 和 left 仅适用于定位元素（position 设置为 static 以外的任何元素），而 margin-top 和 margin-left 适用于所有元素除了 table-caption、table 和 inline-table 以外的表格显示类型的元素。
【讨论】：