21

含まれているdivの中に内部divがあります。

HTML

<div id="container">
  <div id="inner"></div>
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    background-color: red;
}
#inner {
    margin: 30px;
    width: 40px;
    height: 40px;
    background-color: black;
}

フィドル

http://jsfiddle.net/8xUTJ/4/

これにより、大きな赤いボックスの中央に垂直方向と水平方向に小さな黒いボックスが作成されると思います。代わりに、赤いボックスの上部に黒いボックスが貼り付けられ、赤いボックスにはマージントップがあります。

CSSがここで何をしていると考えているかを誰かが説明できますか？

4

5 に答える 5

30

divに追加overflow:autoします。#container

jsFiddleの例

または

#containerdivに境界線を追加します。

この折りたたみマージンの動作について詳しくは、W3Cをご覧ください。

于 2012-09-28T00:52:26.373 に答える
13

提供された解決策は実行可能ですが、誰も問題を説明していません。これはマージン崩壊と呼ばれ、いくつかのシナリオで発生します。

シナリオ1-マージンが一緒に崩壊し、大きい方が優先されるため、これらのアイテムは30pxしか離れていません。

<div style="margin-bottom: 20px"></div>
<div style="margin-top: 30px"></div>

シナリオ2-（あなたのシナリオ）内側のボックスのマージンが外側のボックスの外側にこぼれます。

<div class="outer">
    <div style="margin-top: 20px"></div>
</div>

解決策は、外箱にパディングまたは境界線を付けることです（他の人が提案しているように）。多くの場合、このような状況を緩和するために、外箱で次のCSSを使用します。

.outer {
    margin-top: -1px;
    border-top: 1px solid transparent;
}
于 2012-09-28T01:07:29.270 に答える
3

方法1

position:absolute内側のdivの場合、30pxのマージンが何であるかがわかります

http://jsfiddle.net/8xUTJ/5/

方法2

display:inline-block内部div用

http://jsfiddle.net/8xUTJ/7/

方法3

border:solid 0 transparent外側のdivに

http://jsfiddle.net/8xUTJ/8/

好きなものを選んでください ：）

于 2012-09-28T00:51:30.587 に答える
2

まず、#container持っているmargin-top:0と#inner持っていmargin-top:30pxます。これらの要素の関係は、親と最初の子の関係です。

ブロックのマージントップを最初の子ブロックのマージントップと分離するための境界線、パディング、インラインコンテンツ、またはクリアランスがない場合、または境界線、パディング、インラインコンテンツ、高さ、最小高さ、または最大値がない場合-ブロックのマージンボトムを最後の子のマージンボトムで分離する高さ。その後、これらのマージンは折りたたまれます。折りたたまれたマージンは、親の外側になります。

マージンの折りたたみとは、これらのマージンが1つのマージンに結合され、そのサイズが結合されたマージンの中で最大になることを意味します。

これらのルールは、マージンがゼロの場合にも適用されるため、親のマージンがゼロであるかどうかに関係なく、最初/最後の子のマージンは（上記のルールに従って）親の外側になります。

#containerこれが、フィドルから要素の外側に30pxの上部マージンが適用される理由です。

30pxと0の上部マージンが折りたたまれます

于 2012-09-28T01:56:54.437 に答える
1

このフィドルをチェックしてください

あなたはそれを機能させるためにfloat内側にいる必要がありますdiv

#inner {    
    margin:30px;
    float:left;   /* give float */
    width: 40px;
    height: 40px;
    background-color: black;
 }​

または、にoverflow:autoプロパティを与えますdiv#container。

このフィドルをチェックしてください

于 2012-09-28T01:22:22.253 に答える