このdivマージンが期待どおりに機能しないのはなぜですか？

Firefox 8.0.1を使用しています

margin-topは期待どおりに機能していません。どうも。このdivマージンが期待どおりに機能しないのはなぜですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
      <title>New Border</title> 

      <style type="text/css"> 
       #page { 
        width:980px; 
        margin: 50px auto; 
       } 

       #board { 
        width:600px; 
        height:400px; 
        background-color: gray; 
       } 

       .cell { 
        border: 1px solid; 
        width:50px; 
        height:20px; 
        margin: 30px 5px; 
       } 
      </style> 
    </head> 
    <body> 
      <div id="page"> 
       <div id="board"> 
        <div class="cell"> 
        </div> 
       </div> 
      </div> 
    </body> 
</html>

ので、cell divの中margin-topは期待通りに動作していません。
divをboard divの下に配置するには、margin-leftとする必要がありますが、そうではありません。

これはスクリーンショットです： enter image description here

出典

2012-02-10 hetaoblog

これはわかります。 padding-topまたはborder-topのいずれかをボード要素に追加すると、動作しますhttp://www.blog.highub.com/css/css-hacks/css-firefox-top-margin-extra-space/ – hetaoblog

これはMarginはこれをチェックします。http://www.w3.org/TR/CSS21/box.html#collapsing-margins、http://reference.sitepoint.com/css/collapsingmargins – sandeep

thx a lot！これでわかりました – hetaoblog

あなたは

overflow:hidden;

または

border:1px solid rgba(0,0,0,0); /*or*/ border:1px solid transparent;

#boardするためにCSSを追加することができます。

http://jsfiddle.net/3QfWS/

出典

2012-02-10 08:09:30 Cristy

thx、あなたはそれの背後にある理由について話すことができますか？ – hetaoblog

さて、私はdivがコンテナを超えている理由を本当に知りません。これはかなり頻繁に起こりました。境界線を追加したり、オーバーフローを使用したりすることで、入れ子divがコンテナを超えないようブラウザに理解させることができます。 – Cristy

@hetaoblog理由はhttp://www.w3.org/TR/CSS21/box.html#collapsing-margins –

-1

あなたはボードのdiv内のセルを入れ子になってきました。あなたがそれを望むならば、それを外に置いてください。

出典

2012-02-10 08:05:15 simonmorley

まあ、マージントップは30pxに設定されていますが、30pxのマージントップが表示されているのではないでしょうか？それはなぜですか？ – hetaoblog

なぜ私はその答えのためのマークを取得するか分かりません。あなたの質問には明確ではなかった。そのディビジョンでそれをしたい場合は、いくつかのパディングを追加することができます。 – simonmorley

まあ、私は 'マークダウン'をしていない... – hetaoblog

を参照してください。私は私のために問題を解決し、親要素に「clearfix」クラスを追加しました。

出典

2014-09-15 10:19:21 DynamicDan

このdivマージンが期待どおりに機能しないのはなぜですか？

答えて

関連する問題