要素を垂直方向に配置する一般的な方法は、次の CSS を使用することです。
.item {
position:absolute;
top:50%;
margin-top:-8px; /* half of height */
height: 16px;
}
Chrome のようにメトリック ビューで表示すると、次のように表示されます。
ただし、要素の上にカーソルを置いたときに表示される視覚的な余白はありません。つまり、余白は境界線の「外側」にあり、視覚化できます。しかし、負のマージンは表示されません。それらはどのように見え、何が違うのでしょうか?
margin-top:-8px がと同じでないのは なぜmargin-bottom:8pxですか?
それでは、負のマージンがどのように機能し、その背後にある直感は何なのか. 彼らはどのようにmargin-top < 0アイテムを「バンプアップ」しますか (の場合)?
負のマージンは css で有効であり、その (準拠した) 動作を理解することは、主にボックス モデルとマージンの崩壊に基づいています。特定のシナリオはより複雑ですが、仕様を検討すれば、よくある間違いの多くを回避できます。
たとえば、サンプル コードのレンダリングは、css 仕様によってガイドされます。これは、絶対配置された置換されていない要素の高さとマージンの計算で説明されています。
グラフィカルな表現を作成する場合、おそらく次のようなものを使用します（縮尺は異なります）。
上部のマージン ボックスが失われましたが、コンテンツとパディング ボックス8pxには影響しません。要素は絶対位置にあるため、要素を 8 ピクセル上に移動しても、レイアウトが乱れることはありません。常にそうであるとは限らない、静的なインフロー コンテンツを使用します。
ボーナス：
（このような記事とは対照的に）仕様を読むことが進むべき道であることをまだ納得させる必要がありますか？要素を垂直方向に中央に配置しようとしているようですが、なぜ設定する必要があるのですか?margin-top:-8px;margin-top:-50%;
CSS での垂直方向のセンタリングは、必要以上に難しいものです。上または下の余白を % で設定する場合、値は常に含まれるブロックの幅に対するパーセンテージとして計算されます。これはかなり一般的な落とし穴であり、w3 docos 以外ではほとんど説明されていません。
私はそれを視覚的に説明しようとします：
/**
* 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>余白は要素の外側の間隔であり、パディングは要素の内側の間隔です。
下マージンの設定は、現在のブロックの下に必要な距離を示します。負の上余白を設定すると、ブロックの上に負の間隔が必要になります。負のスペースはそれ自体が紛らわしい概念かもしれませんが、正のトップ マージンがコンテンツを押し下げるのと同じように、負のトップ マージンはコンテンツを引き上げます。
-8px の margin-top は、マージンが 0 の場合よりも 8px 高くなることを意味します。
8px の margin-bottom は、その下にあるものは、マージンが 0 の場合よりも 8px 下になることを意味します。
ここではすでに良い点が指摘されていますが、ブラウザーによるマージンのレンダリング方法については多くの情報がありますが、その理由はまだ完全には解明されていません。
「margin-top:-8px が margin-bottom:8px と同じでないのはなぜですか?」
また、次のように質問することもできます。
正の下部マージンが前の要素を「隆起」しないのに対し、正の上部マージンが次の要素を「隆起」しないのはなぜですか?
したがって、マージンが適用される側に応じて、マージンのレンダリングに違いがあることがわかります。上部 (および左) のマージンは、下部 (および右) のマージンとは異なります。
ブラウザーによってスタイルが適用される方法を (簡略化して) 見ると、物事がより明確になります。要素は、ビューポートで左上隅から始めてトップダウンでレンダリングされます (ここでは、垂直方向のレンダリングに固執しましょう。水平のものは同じように扱われます)。
次の html を検討してください。
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
コード内の位置と同様に、これら 3 つのボックスはブラウザーで「上から下」に積み上げられて表示されます (単純にするために、ここorderでは css3 の「flex-box」モジュールのプロパティについては考慮しません)。そのため、スタイルがボックス 3 に適用されるときはいつでも、前の要素の位置 (ボックス 1 と 2 の) は既に決定されており、レンダリング速度のためにそれ以上変更するべきではありません。
ここで、ボックス 3 の上マージンを -10px と想像してください。前のすべての要素を上に移動してスペースを確保する代わりに、ブラウザーはボックス 3 を押し上げるだけなので、z-index に応じてボックス 3 の上 (または下) にレンダリングされます。 ) 先行する要素。パフォーマンスが問題にならなかったとしても、すべての要素を上に移動するとビューポートの外に移動する可能性があるため、現在のスクロール位置を変更して、すべてを再び表示する必要があります。
同じことがボックス 3 の下部余白にも適用されます。負と正の両方です。既に評価された要素に影響を与える代わりに、次の要素の新しい「開始点」のみが決定されます。したがって、正の下マージンを設定すると、次の要素が押し下げられます。負のものはそれらを押し上げます。
絶対配置を使用し、上部のパーセンテージを指定したため、margin-top のみが .item オブジェクトの場所に影響します。代わりに、bottom: 50% を使用して配置した場合、margin-bottom -8px を中央に配置する必要があり、margin-top は効果がありません。
マージンは、あなたの場合のように絶対的に、または隣接する要素に対して相対的に配置するという点で、要素の境界に影響を与えます。マージンが、それが置かれている要素の基盤であると想像してください。それらは通常、それと同じサイズですが、4 つのエッジのいずれかまたはすべてで大きくまたは小さくすることができます。
CSS は、要素の上部をページの 50% の位置に配置するようにブラウザに指示します。ただし、すべての要素が 1 つのピクセルではないため、ブラウザはページの 50% の位置に要素のどの部分を配置するかを認識する必要があります。要素の上部を揃えるために、上部マージンを使用します。デフォルトでは、これは要素の上部に沿っていますが、CSS で変更できます。
あなたの場合、上位 50% は、ページの中央から始まる要素の上部になります。マイナスの上マージンを適用することにより、ブラウザーは要素の上から 8px の点 (つまり、要素の中央を横切る線) を 50% に配置する場所として使用します。
下部に正のマージンを適用すると、ブラウザが要素自体から下部を離して配置するために使用する線が拡張され、要素とその下に隣接する要素との間にギャップが生じます。ボトム。