html - 負のマージンの概念 - 理解できましたか?

Question

私は負のmargin-topとleftが要素を取り、この方向にプッシュすることを読みました。一方、負の下マージンと右マージンは、要素の上に残りのコンテンツを描画します。

質問

フロート要素 float:right; があります。body タグにラップされます。負の左マージンは左に移動します。

ドキュメントはこの負のマージンが始まる場所で終了し、要素の上に描画する (またはプルする) ものがないため、負の RIGHT マージンはまったく何もしませんか?

私は正しいですか？

Answer 1

負のマージンは、正のマージンと同じように常にブロック ボックスで機能します。それらは、ボックスおよび/または周囲のボックスを正のマージンとは反対の方向に移動するだけです。一体、負のマージンは崩壊することさえあります.

オーバーフローが発生すると、関連するボックスが調整され、このボックスの動きに対応します。

要素が特定の方向にフロートされている場合、フロートされている側のマージンはそれ自体の位置に影響し、反対側のマージンは後続のフロートに相対的に影響します。

ドキュメントはこの負のマージンが始まる場所で終了し、要素の上に描画する (またはプルする) ものがないため、負の RIGHT マージンはまったく何もしませんか?

いいえ。キャンバスと呼ばれるものがあり、理論的には無制限の拡張用スペースがあります。ページ本体またはページ ルートから要素を押し出すマージンがありますか? NBD、キャンバスをその方向に拡張し、このキャンバスを表示するために使用されるビューポートにスクロールバーを作成するだけで完了です。

これは、ルート要素自体がデフォルトでoverflow: autoを持っているため、親が を持っている要素に負のマージンを持っている場合と同じです(ブラウザー ウィンドウ自体から目に見えてオーバーフローするものを実際に持つことはできないため...)。overflow: auto

jsFiddle の概念実証

Answer 2

負の右マージンは確かに機能します! http://fiddle.jshell.net/H6mjC/

Answer 3

フィドルも作りました。もちろん、マイナスマージンは機能しています。

負のマージンをいじる

enter code here

Answer 4

多くの人が、負のマージンについて同じ誤解を信じています。あなたが説明する動作は、多くの負のマージンのケースに一致する傾向がありますが、欠陥のある観点からそれらを説明しています. 実際には、負のマージンはボックスのどの辺でも同じ効果がありますが、「ボックスを移動する」または「他のコンテンツを描画する」という意味ではありません。

たとえば、 aleft-margin: -20pxは「その左端が実際の左端から 20 ピクセル内側にあるかのように要素を配置する」ことを意味します。Aright-margin: -20pxはまったく同じことを意味しますが、右端を意味します。

あなたが提供した単純な説明では、左端が前の要素の右端に隣接して配置されているため、負の左マージンは実際に要素自体を左にシフトしますが、ブラウザは要素の左端が実際に右に移動しているように見せかけるため、要素自体のコンテンツが左に移動して表示されます。

負の右マージンを使用すると、ブラウザーは次の要素の左端を要素の右端に隣接して配置しますが、要素の右端が左に移動したように見せかけて、次の要素自体が左に移動したように見えます。

どちらの場合も、変更されるのは、要素の端の位置に関するブラウザーの概念だけです。

右浮動要素がある場合、ブラウザはその右端が前の右浮動要素の左端に隣接するように配置します。または、前の右浮動要素がない場合は、右浮動要素に隣接します。その位置の親 (スタイルが ではない最も近い親要素)の右端。あなたの場合、以前の右浮動要素がないため、ブラウザはその右端が親の右端に隣接するように要素を配置しますが、要素の右端が左に移動したふりをするため、実際のコンテンツは親要素の外側に突き出て、右に移動しました。positionstatic

ここにデモンストレーションがあります。青い枠線のボックスには、負の左右マージンがあります。その中の黄色のボックスは、ブラウザーがそれをどのように認識するかを表しています。これは、青色の枠のボックスよりも狭いです。これは、負のマージンがブラウザーにエッジを内側に移動させ、要素の実際のサイズを食い物にするためです。ご覧のとおり、その配置ボックスは、左右の兄弟に両側で接触しており、他の要素とまったく同じように配置されています。また、実際のコンテンツは、負のマージンが同じであるため、まったく同じ量だけ両方向に拡張されます。知覚される変化は、要素自体が左マージンのために左に移動し、後続のコンテンツが右マージンのために左に移動することですが、実際には、両方の効果がまったく同じであることがわかります。