上と左のマージン - 上とマージン - 左

Question

上と左のプロパティと上と左のマージンの違いは何ですか？

私はトップと左が通常ポジションで使用されていることを知っています：絶対的な状況ですが、大きな違いがあるかどうかは疑問です。

例：

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

-vs-

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

Answer 1

主な違いは、絶対配置された要素がコンテンツフローから引き出されることです。

しかし、比較的配置された要素でも、周囲のコンテンツが難読化されることがあります。

一方、余白は要素のサイズに追加され、周囲のコンテンツはそれに応じて流れます。

this sample fiddleを参照してください。

どちらも同じ結果をもたらす状況がありますが、通常の状況では、これら2つのプロセスは単純に交換可能でも同等でもありません。

Answer 2

余白あなたの箱と隣接ボックス間のスペースを説明しています。相対的に配置された（すなわち、通常の流れの一部である）ボックスは、それぞれの「マージン」要件が満たされる（「マージンコラプシング」と呼ばれる）、それらの間に十分なスペースを維持する。一方、

topとleftあなたの箱が置かれている場所を指定位置属性です。絶対的に配置されたボックスの場合、値は、それ自体が絶対的に配置されている最も近い収容ボックスに関連して取られる。 top/left/bottom/right属性は、マージンを含むボックスのそれぞれの辺の位置を指定します。要するに、2つはまったく異なる概念です。通常フローのボックスでは、隣接するボックス間の間隔を制御するにはmarginを使用する必要があります。

Answer 3

意味の意味がです。 topのようなボックスオフセットは、ボックスのマージンエッジ（下の画像内の点線のエッジ）が基準エッジからオフセットされる距離を指定します（絶対配置された要素の場合、ボックスの包含ブロックの上端です）。 margin-topのようなマージンプロパティは、ボックスの余白領域の幅を指定します（下の画像では点線エッジとソリッドエッジの間の距離TM）。

Btopとleftが位置決め要素にのみ適用され、テーブル・キャプション以外のテーブルの表示タイプを持つ要素を除くすべての要素に適用margin-topとmargin-leftながら（static以外にposition設定された要素） 、テーブルとインラインテーブル。