Top&Left vs margin-top&margin-left

Question

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

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

例如:

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

航班吗

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

Answer 1

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

但是对于相对定位的元素,周围的内容可能变得模糊.

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

请参阅此示例,并提供一些差异.

当然,在某些情况下两者都会产生相同的结果,但在正常情况下,这两种方法不仅仅是可交换的,也不是可比的.

Answer 2

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

top而left在另一方面是位置指定属性的地方您箱位于; 对于绝对定位的盒子,值是相对于最近的包含盒子取的,盒子本身是绝对定位的.顶部/左侧/底部/右侧属性指定框的相应边缘的位置,包括其边距.

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

Answer 3

A存在语义差异。框偏移量top指定框的边距边缘（下图中的虚线边缘）与参考边缘的偏移量（对于绝对定位的元素，这是框包含块的顶部边缘）。边距属性，如margin-top指定框边距区域的宽度（下图TM中虚线边缘和实线边缘之间的距离）。

B top andleft仅适用于定位元素（position设置为除 之外的任何元素的元素static），而margin-topandmargin-left适用于所有元素，除了具有表格标题、表格和内联表格以外的表格显示类型的元素。