web-dev-qa-db-ja.com

CSSの負のマージンはどのように機能し、なぜ（margin-top：-5！= margin-bottom：5）ですか？

垂直配置要素の一般的なトリックは、次のCSSを使用することです。

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

メトリックビューでChromeのように表示される場合、これが表示されます。

enter image description here

ただし、要素の上にカーソルを置いたときに視覚的な余白はありません。つまり、余白は境界の「外側」にあり、視覚化できます。ただし、マイナスのマージンは表示されません。彼らはどのように見え、何が違うのですか？

なぜmargin-top:-8pxと同じではないmargin-bottom:8pxですか？

したがって、マイナスのマージンはどのように機能し、その背後にある直観は何ですか。彼らはどのようにアイテムを「バンプアップ」しますか（margin-top < 0の場合）？

cssmargin
97
PhD

負のマージンはcssで有効であり、その（準拠）動作の理解は主に ボックスモデル とマージンの崩壊に基づいています。特定のシナリオはより複雑ですが、仕様を検討した後、多くの一般的な間違いを回避できます。

たとえば、サンプルコードのレンダリングは、 絶対に配置された非置換要素の高さとマージンの計算 。

グラフィカルな表現を作成する場合、おそらく次のようなものになります（縮尺どおりではありません）。

negative top margin

マージンボックスは上部の8pxを失いましたが、これはコンテンツとパディングボックスには影響しません。エレメントは絶対に配置されているため、エレメントを8ピクセル上に移動しても、レイアウトはそれ以上乱れません。常にそうとは限らない静的なインフローコンテンツを使用します。

ボーナス：

（ このような記事 とは対照的に）スペックを読むことは方法であると納得させる必要がありますか？要素を垂直方向に中央揃えしようとしているのがわかりますが、なぜmargin-top:-8px;ではなくmargin-top:-50%;を設定する必要があるのですか？

さて、CSSの垂直方向のセンタリングは 本来よりも難しい です。偶数topまたはbottomマージンを％で設定すると、値が計算されますas 常に包含ブロックのwidthに相対的な割合 。これはかなり一般的な落とし穴であり、癖はw3ドコ以外ではめったに説明されません

78
o.v.

視覚的に説明しようと思います。

/**
 * explaining margins
 */

body {
  padding: 3em 15%
}

.parent {
  width: 50%;
  width: 400px;
  height: 400px;
  position: relative;
  background: lemonchiffon;
}

.parent:before,
.parent:after {
  position: absolute;
  content: "";
}

.parent:before {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: dashed 1px #ccc;
}

.parent:after {
  left: 0;
  right: 0;
  top: 50%;
  border-top: dashed 1px #ccc;
}

.child {
  width: 200px;
  height: 200px;
  background: rgba(200, 198, 133, .5);
}

ul {
  padding: 5% 20px;
}

.set1 .child {
  margin: 0;
  position: relative;
}

.set2 .child {
  margin-left: 75px;
  position: relative;
}

.set3 .child {
  margin-left: -75px;
  position: relative;
}


/* position absolute */

.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}

.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}

.set6 .child {
  top: 50%; /* level from which margin-top starts 
        - downwards, in the case of a positive margin
        - upwards, in the case of a negative margin     
        */
  left: 50%; /* level from which margin-left starts 
        - towards right, in the case of a positive margin
        - towards left, in the case of a negative margin        
        */
  margin: -75px;
  position: absolute;
}
<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
  <div class="child">
    <pre>
.set1 .child {
  margin: 0;
  position: relative;
}
                </pre>
  </div>
</div>

<h3>Set 2</h3>
<div class="parent set2">
  <div class="child">
    <pre>
.set2 .child {
  margin-left: 75px;
  position: relative;
}
                </pre>
  </div>
</div>

<h3>Set 3</h3>
<div class="parent set3">
  <div class="child">
    <pre>
.set3 .child {
  margin-left: -75px;
  position: relative;
}
                </pre>
  </div>
</div>

<h2><code>position: absolute;</code></h2>

<h3>Set 4</h3>
<div class="parent set4">
  <div class="child">
    <pre>
.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}
                </pre>
  </div>
</div>

<h3>Set 5</h3>
<div class="parent set5">
  <div class="child">
    <pre>
.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}
                </pre>
  </div>
</div>

<h3>Set 6</h3>
<div class="parent set6">
  <div class="child">
    <pre>
.set6 .child {
  top: 50%;
  left: 50%;
  margin: -75px;
  position: absolute;
}
                </pre>
  </div>
</div>
70
Ana

余白は要素の外側の間隔です。ちょうどパディングが要素の内側の間隔です。

下の余白を設定すると、現在のブロックの下に必要な距離が示されます。負の上マージンを設定すると、ブロックの上に負の間隔が必要になります。負の間隔はそれ自体紛らわしい概念ですが、正の上部マージンがコンテンツを押し下げるのと同じ方法で、負の上部マージンがコンテンツを引き上げます。

28
David Hedlund

マージン上部が-8pxの場合、マージンが0の場合よりも8px高くなります。

8pxのマージン底とは、マージンが0の場合、その下が8ピクセル下にあることを意味します。

19
Rich Bradshaw

すでにここで良い点がありますが、howに関する多くの情報がありますが、マージンのレンダリングはブラウザによって行われますが、 whyはまだ完全には回答されていません：

「なぜmargin-top：-8pxはmargin-bottom：8pxと同じではないのですか？」

私たちも尋ねることができます：

正の下部マージンが先行要素を「バンプアップ」しないのに対し、正の上部マージンが後続要素を「バンプダウン」しないのはなぜですか？

つまり、適用される側に応じたマージンのレンダリングの違い-上部（および左）マージンは下部（および右）マージンと異なります。

ブラウザーによるスタイルの適用方法を（簡略化して）見ると、物事がより明確になります。要素はビューポートで左上隅から上から下にレンダリングされます（とりあえず垂直レンダリングに固執しましょう）水平のものは同じように扱われます）。

次のHTMLを検討してください。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

コード内での位置と同様に、これらの3つのボックスはブラウザーで「上から下」に積み重ねられて表示されます（物事をシンプルに保ち、ここではcss3のorderプロパティを考慮しません「フレックスボックス」モジュール）。したがって、スタイルがボックス3に適用されるときは常に、前の要素の位置（ボックス1および2）が既に決定されているため、レンダリング速度のためにこれ以上変更しないでください。

ここで、ボックス3の-10pxの上部マージンを想像してください。スペースを集めるために先行するすべての要素をシフトする代わりに、ブラウザーはボックス3を押し上げるだけなので、z-indexの上部（または下部）にレンダリングされます）先行する要素。パフォーマンスに問題がなかったとしても、すべての要素を上に移動すると、ビューポートから要素が移動する可能性があるため、すべてを再び表示するには、現在のスクロール位置を変更する必要があります。

同じことは、負と正の両方のボックス3の下マージンにも適用されます。すでに評価された要素に影響を与える代わりに、今後の要素の新しい「開始点」のみが決定されます。したがって、正の下マージンを設定すると、following要素が押し下げられます。否定的なものはそれらを押し上げます。

15
schellmax

絶対配置を使用し、上部の割合を指定したため、margin-topのみが.itemオブジェクトの場所に影響します。代わりにbottom：50％を使用して配置した場合、margin-bottom -8pxを中央に配置する必要があり、margin-topは効果がありません。

マージンは、絶対に配置するか、隣接する要素を基準にして配置するかによって、要素の境界に影響します。マージンは、それが置かれる要素の基盤であると想像してください。通常、サイズは同じですが、4つのエッジのいずれかまたはすべてを大きくしたり小さくしたりできます。

CSSは、要素の上部をページの50％下の位置にマージンを配置するようにブラウザに指示します。ただし、すべての要素が単一のピクセルではないため、ブラウザーは、ページの50％の位置に並ぶために、その部分を知る必要があります。要素の上部を揃えるために、上部マージンを使用します。デフォルトでは、これは要素の上部に沿っていますが、CSSで変更できます。

あなたの場合、上位50％の場合、要素の先頭はページの中央から始まります。負の上部マージンを適用することにより、ブラウザーは50％に配置する場所として、上から要素へのポイント8px（つまり、その中央を横切る線）を使用します。

下部に正のマージンを適用すると、ブラウザが下部を要素自体から離れるように配置するために使用する線が延長され、下部と隣接する要素との間に隙間ができます。ボトム。

3
Rob Trickey

この質問はよく答えられたのだろうか：cssマージンがどのように機能し、なぜそれがmargin-top：-5; margin-bottom：5;と同じではありませんか？

マージンは、要素の周囲からの距離です。 margin-topは、「...要素の「ボックス」の上部「側面」から測定する周囲からの距離、および「ボックス」の下部「側面」からの距離であるmargin-bottom」と言います。次に、margin-top：5;上部の「側面」境界に関係している場合、-5。上部の「サイド」から近づいてくるものはすべて、要素の上部の「サイド」に5だけオーバーラップでき、margin-bottom：5になります。は、要素の下部「側面」と周囲の距離が5であることを意味します。

基本的にはフロートされた要素などの影響を受けます： http://www.w3.org/TR/CSS2/box.html#margin-properties 。

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

私は修正されるべきです。

3
Maybe