問題は次のとおりです。それらはどのように異なりますか?
私の理解はこれです：
margin-topで慣れ親しんでいるマージンに似ていMS Wordます。これは、ページの周りの余白に似ています。使用すると、コンテンツが上からどれだけ離れているか、またはコンテンツが含まれている要素からどこにあるかを決定します。コンテンツがdivタグ内にある場合、位置は相対的に計算されますdivが、含まれる要素がない場合は、ブラウザに対して相対的に計算されます。他のコンテンツを押し下げます。topコンテンツを押し下げるために使用され、プロパティの微調整として使用されpositionます。他のコンテンツに害を与えることなく、コンテンツを押し下げます。つまり、きめ細かな制御を提供します。padding-topまた、上部にスペースを追加しながらコンテンツを押し下げます。これを正しく取得していますか？
マージンはマージンの崩壊に悩まされます-垂直マージンが隣接していると見なされる場合（たとえば、それらを分離する境界がない場合）、2つの要素間の分離は、それぞれの隣接するマージンの合計ではなく、2つのマージンの大きい方になります。一方、水平方向のマージンは決して崩壊しません。
マージンは要素のボックスの外側にあります。
トップパディングは期待どおりに機能し、崩壊することはありません。ただし、上部のパディングは、パーセンテージで定義されている場合、高さではなく要素の幅のパーセンテージになります。
パディングは要素のボックス内にあります。要素のサイズを500*500pxに定義し、パディングを20pxに設定すると、その要素の実際のサイズは540 * 540px（500 + 20 + 20）になります。これは、を使用することで回避できますbox-sizing: border-box。これは、すべての境界線とパディングを含む、幅と高さの属性で定義された要素をレンダリングするようにブラウザに指示します。
一方、Topは、上記の要素を次の場所から置き換えます。
さらに重要なことに、上部位置のオフセットパーセンテージは、幅ではなく、親の高さに基づいています（パディングとは異なります）。
私が検索したものに基づいて：
マージンはブロック要素の外側にあり、パディングは内側にあり、要素が独立している (位置に関して) 上にあります。
margin(margin-top) を使用してブロックをその外側のものから分離し、 padding(padding-top) を使用して内容をブロックの端から離し、最後に top を使用して位置呼び出しによって要素をローミングします。