CSS：トップvsマージントップ

これら2つの違いを完全に理解しているかどうかはわかりません。

誰かがなぜ私が他のものを使用するのか、そしてそれらがどのように異なるのか説明できますか？

toppositionプロパティを使用して要素を微調整するためのものです。
margin-top前のものとの関係で、要素までの外部距離を測定するためのものです。

また、top動作は、位置の種類に応じて異なることabsolute、relativeまたはfixed。

（ブロック）要素をドキュメントフロー内の他の要素から移動したい場合は、マージンを使用します。つまり、次の要素を押し下げたり、さらに押し下げたりします。隣接するブロック要素の垂直マージンが崩れることに注意してください。

あなたは周囲の要素に影響を与えないために要素を望んでいた場合は、位置（絶対、相対。）及び使用したいtop、bottom、leftおよびright設定を。

relative位置付け、要素がまだ静的に配置されたときのように、元のスペースを占有します。何も起こらない、なぜあなただけを切り替える場合には、だstaticとrelative位置。そこから、周囲の要素を突き刺します。

でabsolute、それが占有するスペースを解放しますので、ポジショニング、あなたは完全に、（静的）ドキュメントフローから要素を削除します。その後、自由に配置できますが、その周りにラップされた、次に静的ではない最良の要素に対して相対的です。何もない場合は、ページ全体にアンカーされます。

マージンは要素の通常の境界を適用および拡張/縮小しますが、topを呼び出すと、要素の通常の位置は無視され、特定の位置に浮動されます。

例：

html：

<div id="some_element">content</div>

css：

#some_element {margin-top: 50%}

要素がコンテナの50％の高さでhtmlの表示を開始することを意味します（つまり、「コンテンツ」という単語を表示するdivは、div＃some_elementの直前に含まれるdivまたはhtmlノードの50％の高さで表示されます）。ブラウザのインス​​ペクタ（Windowsではf12、Macではcmd + alt + i）をマウスで要素の上に置くと、境界が強調表示され、要素が再配置されずに押し下げられていることがわかります。

一方、トップ：

#some_element {top: 50%}

実際に要素を再配置しますが、コンテナの50％で表示されますが、要素は再配置され、その端は包含要素の50％から始まります。つまり、要素のエッジとそのコンテナの間にギャップがあります。

乾杯！

topプロパティは、positionプロパティです。またはpositionなどのプロパティとともに使用されます。要素自体のプロパティです。absoluterelativemargin-top

バイトから：

「マージンとは、要素のボックスの端と完全なボックスの端の間のスペース（文字のマージンなど）です。'top 'は、要素のマージンエッジを、含まれている同じ紙片などのブロックブロックボックスから移動します。段ボール箱ですが、コンテナの端にはありません。」

私の理解では、margin-topは要素にマージンを作成し、topは要素の上端を、それを含む要素の上端の下にオフセットで設定します。

ここで試すことができます：

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

topをmargin-topに置き換えるだけで違いを確認できます。