web-dev-qa-db-ja.com

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

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

誰かが私が他のものよりも使用する理由とそれらがどのように異なるかを説明できますか？

csscss-position
82
Jason

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

また、topの動作は、位置のタイプ、absolute、relative、またはfixedによって異なる場合があります。

70
Dave

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

要素が周囲の要素に影響を与えないようにする場合は、位置決め（abs。、rel。）とtop、bottom、left、rightの設定を使用します。

relativeポジショニングでは、要素は静的に配置された場合と同様に元のスペースを占有します。 staticからrelativeの位置に切り替えただけでは何も起こりません。そこから、周囲の要素にそれを押し込むことができます。

absoluteポジショニングを使用すると、エレメントを（静的）ドキュメントフローから完全に削除するため、占有されていたスペースが解放されます。その後、自由に配置できますが、相対は、その周りにラップされた次の最適な非静的に配置された要素になります。存在しない場合は、ページ全体に固定されます。

83
DanMan

マージンは、要素の通常の境界を適用および拡張/縮小しますが、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％に表示されますが、Edgeが含まれる要素の50％で開始するように要素を再配置します。つまり、要素のエッジとそのコンテナの間に隙間ができます。

乾杯！

8
DrewT

バイトから：

「マージンとは、要素のボックスのエッジと、文字のマージンなど、完全なボックスのエッジとの間のスペースです。「top」は、内部の同じ紙など、ブロックのボックスから要素のマージンエッジを置き換えます段ボール箱ですが、コンテナの端に接していません。」

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

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

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

topをmargin-topに置き換えるだけで違いがわかります。

4
Orbit

topプロパティは位置プロパティです。 positionやabsoluteなどのrelativeプロパティとともに使用されます。 margin-topは、要素自体のプロパティです。

4
lin

私は同じことを疑問に思っていました。誰かがそれをいじりたいなら Codepen を作成しました。

CSS：

.container {
    margin-top: -70px;
}


.category {
    top: -12px;
    position: absolute;
}
0
Furkat Kholmatov