16

タイトル、基本的に。のようなものの代わりにマージンポジショニングを使用して多くの作業を行ってきましたが、position: relativeそのように制御できることに気づいていなかったからです。

何marginをすべきか、なぜ私は仕事を終わらせるpositionときに使うべきなmarginのか?

4

3 に答える 3

20

簡単に言えば、余白は要素のボックスの周りにスペースを追加し、ページ フロー内でその要素のために予約されているスペースの量を一致するように変更します。したがって、上マージンはブロックを下に移動すると同時に、それに続くすべてのコンテンツを下に移動します。下マージンは、ブロック自体を同じ場所に残しながら、それに続くコンテンツを下に移動します。これは非常に直感的で、おそらく期待どおりに動作します。

相対的な配置は奇妙なことをします: ブロックが描画される場所は変わりますが、ブロックのために予約されたスペースは変わりません。したがって、相対配置を使用して top を 10px に設定すると、ボックスはページの下に 10px 移動しますが、それ以降のコンテンツは移動しません。これにより、ボックスがそれに続くコンテンツと重なる可能性があります。

本当に奇妙な効果が必要な場合 (および相対位置の動作を確認したい場合) は、float: left と相対位置の両方を小さなブロックに適用します。ブロックは移動しますが、ブロック用に予約された領域は元の場所に残ります。

私はあなたのために例を作りました：

<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)

フィドル

于 2013-04-17T03:59:31.183 に答える
12

まず、静的ポジショニングはtop値を無視するので、あなたの質問は少し混乱していると思います. あなたが尋ねるつもりだったposition:relativeのが だった場合、これに対処する答えがあります.

一般に、相対的な配置ではなく、マージンとパディングを使用して要素を隣接する要素に対して相対的に配置する方がはるかに優れていると思います（静的な配置では値が無視されるため、これはあなたが本当に求めていると思いますtop）。

相対的な配置または負のマージンは、オブジェクトの重なりを引き起こす可能性があり、それが私が望んでいることはめったになく、イベントルーティング、境界線、背景などでいくつかの問題につながる可能性があります.それが明示的に必要なものでない場合. 私はあなたposition:relativeを である子のコンテナとして扱いますがposition: absolute、要素を単独で移動するためにそれを使用することはほとんどありません。これは、ボーダーとパディングがほとんど常にクリーンであるためです。

マージンの機能に関する質問の余分な部分については、おそらく少し検索してから、いくつかの図を読むと、これを視覚化するのに本当に役立つでしょう。マージンは、オブジェクトの周囲のピクセルの外側のセットです。マージンの内側はボーダーです。ボーダーの内側にはパディングがあり、パディングの内側にはコンテンツがあります。したがって、余白は境界線の外側にあるオブジェクトの周囲のピクセル数であり、パディングは境界線とオブジェクトのコンテンツの間のピクセル数です。

ボーダーが指定されていない場合、マージンとパディングは非常によく似た効果を提供しますが、隣接するオブジェクトのマージンが時々折りたたまれる (たとえば、単一のマージンに結合される) ことを除きますが、パディングはそのように結合されることはなく、背景は境界線まで拡張されますが、下には拡張されません。マージン。

これは、マージンとパディングに関する StackOverflow の質問/回答で、他の有用なリファレンスを提供しています: CSS でマージンとパディングを使用する場合

これは、マージンとパディングをカバーする CSS ボックス モデルに関する良い記事です。

于 2013-04-17T03:28:27.090 に答える