CSSの上マージンの問題

下のCSSに基づいて、最初のdivにトップマージンが得られない理由を知っている人はいますか？これは、Mac OSX Lionで動作するChrome、Safari、Firefox 4（Snow Leopardでも同じようにレンダリングされています）でも同じです。私は最初の項目が内側と内側のdivの周りに5ピクセルのマージンで表示されることを期待しています。マージンがトップにも適用されないのはなぜですか？私がmargin-top：5pxをCSSに指定しても、私は期待どおりレンダリングしません。CSSの上マージンの問題

<!DOCTYPE html> 
<html> 

    <head> 
     <style> 
     .outer{ 
      background-color:red; 
      width:100px; 
      height:100px; 
      margin-bottom:20px; 
     } 

     .inner{ 
      background-color:white; 
      margin:5px; 
     } 

     .shim{ 
      height:1px; 
     } 

     .outer2{ 
      background-color:red; 
      width:100px; 
      height:100px; 
      margin-bottom:20px; 
      padding:5px; 
     } 

     .inner2{ 
      background-color:white; 
     } 
     </style> 
    </head> 

    <body> 

     <div class="outer"> 
      <div class="inner"> 
       Margin 
      </div> 
     </div> 

     <div class="outer"> 
      <div class="shim"></div> 
      <div class="inner"> 
       Margin+Shim 
      </div> 
     </div> 

     <div class="outer2"> 
      <div class="inner2"> 
       Padding 
      </div> 
     </div> 

    </body> 

</html>

出典

2011-07-26 Joshua Miller

「崩壊マージン」という共通の問題が発生しています。基本的に、垂直マージンが接触するたびに（ある要素が別の要素内にあっても）、マージンが崩壊します。

この場合、内部divのmarginプロパティは、外側divのmargin-bottom: 20px;プロパティに折りたたまれています。これを修正するには、含まれている要素の周りに小さなパディングまたは境界線を追加します。

はちょうどあなたのコードを使用して、これを試み、それが動作：余白を崩壊に http://jsfiddle.net/hWPyD/2/

さらに詳しい情報： http://www.w3.org/TR/CSS2/box.html#collapsing-margins

出典

2011-07-26 19:05:24

文字通り、1pxのパディングを外側のコンテナに追加する必要があり、魔法のように動作し始めます。 CSSはとても恣意的ですが、私は彼らの仕様で何が指定されているのかは分かりません。 – EpicPandaForce

htmlタグにはデフォルトのマージンとパディングがあるためです。すべてのブラウザのデフォルトを削除するには、リセットlike this oneを使用してください。（私はこれを行うことを強くお勧めします）

出典

2011-07-26 18:54:18 locrizak

[OK]を、私は「関連」リンクわずか数秒に従うことによって、ここでスタックオーバーフローの答えを見つけました私の質問を投稿した後。その質問は、私がどうにか見落としてしまったほぼ同じタイトルの記事[CSS Margin Top Isuses]（http://stackoverflow.com/questions/4524275/css-margin-top-issues）で答えられました。 .outer {\t \t背景色：「外側」そうのようなクラスに隠さ：答えがオーバーフロー追加することであった赤。 \t \t幅：100px; \t \t高さ：100px; \t \t margin-bottom：20px; \t \t overflow：hidden; \t} 次回は、投稿する前にさらに詳細に検索します。私はlocrizakからの最初の答えに信用を与えるでしょう。 –

ブラウザのデフォルトは文字通りこの問題とは関係ありません。 –

答えて

関連する問題