8

それは常に起こるわけではありませんが、時々、親divは子divプロパティを継承し、私のレイアウトを強打から外します。

たとえば、これはhtml（pseudo）です。

<div 1>
   <div 2>
      content here
   </div>

</div><!-- div one end -->

Css（疑似）：

#1{ margin top:0; }
#2 {margin top:10 }

次のようになります。親のdiv1と子のdiv2

div 1parent

-----------------------------------------
this is address bar (top of win)
-----------------------------------------
----------------
|  ----------  |
| | div2Child  |
| ------------ |
|--------------|

div1からaddyウィンドウまでのギャップがないと仮定します。

さて、奇妙な理由で、上記と同じコードを使用して、プレビューすると、次のようになります。

-----------------------------------------
this is address bar (top of win)
-----------------------------------------

gap here.

----------------
|  ----------  |
| |   div2     |
| ------------ |
|--------------|

私が何をしても、私はまだそのギャップを取得します。それをFirebugに持っていき、Divでテストすると、div2は、マージンが親のポジショニングに影響していることを明確に示しています。

..私は例をあげようとしていましたが...あなたが見ることができるように実際のコードはここにあります...（できるだけ簡単です）

HTML：

<div id="one">
    <div id="two">content here on 2</div>
</div>

the CSS: 

    #one{
        width:1000px;
        height:300px;
        background:#09F;
        margin-top:0px !important;
padding:0px;


    }

    #two{
        width:500px;
        height:100px;
        background:red;
        margin-top:20px;
padding:0px;
    }

そして、私はまだ私の図で上に示したギャップを取得します。私を夢中にさせるのは、私たちのほとんどのように、このレイアウトを何百万回も行ってきたということです....私はこれと同じ方法を使用する作品のDOZENSを引き上げることができ、問題はありません...私はいつも使用しているCssresetを持っています。！重要で、ランダムではなく<br/> or <p>、0のパディングがあります...確かに、2つのdivとそのcssだけでダミーのページを作成しましたが、それでも.......。

なぜこれが起こるのかについて何か考えはありますか？今、私の最後のサイトの作成と、テスト用に作成したこのダミーのhtmlを見ていて、すべてのブラウザーで、そのばかげたギャップが生じています。

4

2 に答える 2

13

あなたが観察しているのはマージン崩壊です。必ずしも理解しやすいとは限らないシナリオで発生する可能性があるため、ドキュメントを参照することをお勧めします。

于 2012-04-04T18:11:07.703 に答える
1

使用しない理由：

#one{
        width:1000px;
        height:300px;
        background:#09F;
        margin-top:0px !important;
        padding-top:20px;
    }
    #two{
        width:500px;
        height:100px;
        background:red;
        margin-top:0px;
        padding:0px;
    }​

？ただ疑問に思う

于 2012-04-04T18:12:40.857 に答える