web-dev-qa-db-ja.com

このCSSのマージントップスタイルが機能しないのはなぜですか？

私は別のdiv内のdivにマージン値を追加しようとしました。トップ値を除いてすべてうまくいきます、それは無視されるようです。しかし、なぜ？

私が期待していたこと：
What I expected with margin:50px 50px 50px 50px;

私が得たもの：
What I get with margin:50px 50px 50px 50px;

コード：

#outer {
        width: 500px; 
        height: 200px; 
        background: #FFCCCC;
        margin: 50px auto 0 auto;
        display: block;
}
#inner {
        background: #FFCC33;
        margin: 50px 50px 50px 50px;
        padding: 10px;
        display: block;
}
<div id="outer">
  <div id="inner">
        Hello world!
  </div>
</div>

W3Schools はなぜマージンがこのように振る舞うのか説明がありません。

htmlmargincss
290
jamietelin

実際には、#innerエレメントの上部マージン が#outerエレメントの上部エッジに折りたたまれ 、#outerマージンのみがそのまま残ります（表示されていません）あなたの画像に）。マージンが等しいため、両方のボックスの上端は互いにぴったり重なります。

これがW3C仕様からの関連点です。

8.3.1マージンを縮小する

CSSでは、2つ以上のボックスの隣接マージン（兄弟である場合もそうでない場合もあります）を組み合わせて単一のマージンを形成することができます。このように組み合わされたマージンは折りたたみと呼ばれ、結果として得られる組み合わされたマージンは折りたたみマージンと呼ばれます。

隣接する垂直方向の余白の折りたたみ[...]

次の場合に限り、2つのマージンがに隣接するです。

  • どちらも、同じブロックフォーマットコンテキストに参加するインフローブロックレベルボックスに属します。
  • ラインボックスなし、クリアランスなし、パディングなし、境界線なし
  • 両方とも垂直方向に隣接するボックスエッジに属し、すなわち、以下の対のうちの１つを形成する。
    • ボックスの上部マージンと最初のインフロー子の上部マージン

次のいずれかを実行すると、マージンが縮小されなくなります。

それは、

  • 浮いている箱と他の箱の間の余白は崩れません（浮遊物とその流入している子の間でさえも）。
  • 新しいブロックフォーマットコンテキストを確立する要素の余白（floatや、 'visible'以外の 'overflow'を持つ要素など）は、それらのインフローの子と一緒には折りたたまれません。
  • インラインブロックボックスの余白は折りたたまれません（それらのインフローチャイルドでさえも）。

左右の余白は、予想どおりに動作します。

水平方向の余白は崩れません。

417
BoltClock

内側のdivにdisplay: inline-block;を使ってみてください。

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}
81
enderskill

@BoltClockが述べたことはかなり堅実です。そしてここで私はちょうどこの問題に対するいくつかの解決策を追加したいです。これを確認してください w3c_collapsingマージン 。緑色の部分は、この問題をどのように解決できるかという潜在的な考え方です。

解決策1

浮いている箱と他の箱の間の余白は崩れません（浮遊物とその流入している子の間でさえも）。

つまり、float:leftを#outerまたは#innerdemo1 に追加できます。

また、floatはautoのマージンを無効にします。

解決策2

新しいブロックフォーマットコンテキストを確立する要素の余白（floatや、 'visible'以外の 'overflow'を持つ要素など）は、それらのインフローの子と一緒には折りたたまれません。

visible以外に、overflow: hiddenを#outerに入れましょう。そして、この方法はかなり単純でまともなようです。私はそれが好きです。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

解決策3

絶対的に配置されたボックスのマージンは崩れません（それらのインフローの子に対してさえも）。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

または

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

これら二つの方法はdivの通常の流れを壊すでしょう

解決策4

インラインブロックボックスの余白は折りたたまれません（それらのインフローチャイルドでさえも）。

@enderskillと同じです。

解決策5

その兄弟がクリアランスを持っていない限り、インフローブロックレベル要素の下マージンは、常にその次のインフローブロックレベル兄弟の上マージンと折りたたまれます。

これは兄弟間の折りたたみマージンなので、この問題とはあまり関係がありません。トップボックスにmargin-bottom: 30pxがあり、兄弟ボックスにmargin-top: 10pxがあるかどうかを意味します。それらの間の総マージンは30pxではなく40pxです。

解決策6

要素に上部境界線、上部パディングがなく、子にクリアランスがない場合、インフローブロック要素の上部マージンは、最初のインフローブロックレベルの子の上部マージンで縮小されます。

これは非常におもしろいので、上の境界線を1本追加するだけです

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

また<div>はデフォルトでブロックレベルなので、意図的に宣言する必要はありません。私の初心者の評判のために2つ以上のリンクと画像を投稿することができないことで申し訳ありません。少なくとも、あなたは問題が次に来るときにどこから来るのかを知っています。

18
Qiang

あなたが持っているものがなぜうまくいかないのかわからないが、あなたは追加することができます

overflow: auto;

外側のdivに。

12
Brandon

#outerにパディングを追加すれば、うまくいきます。

デモ

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}
10
bookcasey

正確な理由はわからないが、内部のCSSを

display:inline-block;

うまくいくようです。

9
harriyott

"理由"（折りたたみマージン付きのものにする必要があります）には答えませんが、あなたがやろうとしていることを実行する最も簡単で論理的な方法は、単ににpadding-topを追加することです。外側のdiv ：

http://jsfiddle.net/hpU5d/1/

マイナーノート - ブロックのないようにあなたのコードに何か他のものがない限り、divをdisplay:block;に設定する必要はないはずです。

2
Dave

これを試して：

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

がんばろう

2
Mustafa M Jalal

＃innerdivのpositionプロパティをrelativeに設定するとよいでしょう。効果を達成するのにも役立ちます。しかし、とにかく私はIE9の質問と最新のGoogle Chromeに貼り付けたオリジナルのコードを試してみましたが、それらは何の変更もなく既に望ましい効果をもたらしています。

1
viditkothari

外側のdivにはpadding-top:50pxを使用してください。このようなもの：

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

注：パディングをするとdivのサイズが大きくなります。この場合、あなたのdivのサイズが重要であるならば、私はそれが特定の高さを持たなければならないかどうかを意味します。高さを50ピクセル減少させます。

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}
1
Ata Iravani

何よりも重要なのは、すべてを強制することです。

margin:50px 50px 50px 50px !important;
0
atgr24869

簡単に修正するために、子要素を次のようにdiv要素にラップしてみてください-

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

innerとouter divの間の1pxのパディングにより、inner divのマージンは崩壊しません。したがって、論理的には、1px余分なスペースとinner divの既存のマージンがあります。

0
Mithilesh Tipkari