頂部和左側與邊緣頂部和邊緣左側

Question

使用頂部和左側屬性以及頂部和左側邊距之間的區別是什麼？

我知道頂部和左邊通常用在絕對位置：絕對情況，但我仍然想知道是否有任何主要區別。

例如：

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

航班嗎

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

Answer 1

那麼，主要的區別是絕對定位的元素被拉出內容流。

但是，對於相對定位的元素，周圍的內容可能會變得模糊不清。

另一方面，邊距被添加到元素的大小，而周圍的內容則相應地流動。

請參閱this sample fiddle有一些差異。

當然在某些情況下，兩者都可以提供相同的結果，但在正常情況下，這兩個方法不僅僅是可交換的，也不是可比較的。

Answer 2

保證金描述你的盒子和相鄰盒之間的空間。相對定位的盒子（即屬於正常流量的一部分）將保持它們之間足夠的空間，以滿足每個「邊緣」要求（稱爲「邊緣塌陷」）。

top和left，另一方面是指定其中你箱位於位置屬性;對於絕對定位的框，相對於本身絕對定位的最近的包含框取值。頂部/左側/底部/右側屬性指定包裝箱邊緣的邊緣位置。

總之，這兩者是完全不同的概念。對於正常流動的箱子，您應該使用margin來控制相鄰箱子之間的間距。

Answer 3

A還有一個語義區別。盒子偏移如top指定盒子的邊緣邊緣（下圖中的虛線邊緣）偏離參考邊緣的距離（對於絕對定位的元素，即盒子的包含塊的頂部邊緣）。例如margin-top的邊距屬性指定了框的邊距區域的寬度（下圖中虛線邊緣和實心邊緣之間的距離爲TM）。

乙top和left僅適用於定位的元素而margin-top和margin-left適用於所有的元件除了具有比表字幕其他表顯示類型的元件（與position設定爲比static以外的任何其他元素） ，表格和內聯表格。