3

重複の可能性:
DIV が空の場合に CSS プロパティが親要素に渡される

私はCSSレイアウトデザインの初心者です。

現時点でやりたいことは、2 つの Div ボックスを作成し、1 つを互いに入れ子にしたいということです。とにかく、私の問題は、内側のボックスに設定した上部マージンが思い通りに動作しなかったことです。

たとえば、以下のスクリプトの一部を使用してください。

[デモ.html]

<html>
    <header>
        <title>Mock-up page</title>
        <link href="stylesheets/demo.css" rel="stylesheet"  type="text/css">

    </header>
    <body>
        <div id="box1">
            <div id="box2">div 2</div>
        </div>
    </body>
</html>

[デモ.css]

#box1{
    width: 300px;
    height: 300px; 
    background-color:#0000FF;       
}

#box2{
    margin-top: 30px;
    background-color:#008000;
}

それが生み出した効果は、外側のボックスがbodyタグから30px下に押し下げられただけで(写真の左側)、これは私が期待していたものではありませんでした(写真の右側)。

ここに画像の説明を入力

これが起こった理由と、スタイリングを修正する方法は何ですか?

4

4 に答える 4

1

を変更するmargin-topと、padding-top必要なことが行われます。

これは、多くのブラウザーで既知の問題です。
要素の最初の子にmargin-top（その前にコンテンツがない）がある場合、マージンは親要素の上部をオーバーフローし、あなたの場合のようにプッシュします。

他の解決策はありますが、それらはすべて少しハックです:

  • position: を子に対して適用し、margin-topを aに変更してmargin-bottom適用しますtop: 20px;。

  • height: 0;と;を使用して、コンテンツ (ここでは   を使用できます) を含む内部ボックスの前に要素を作成しますoverflow: hidden;。

  • 要素の背景色または同じ色を設定しborder-top: 1px solid transparentます (この場合、境界線がオブジェクトの高さに追加されることに注意してください。

  • 等々...

于 2012-07-08T16:48:19.327 に答える
0

Chris Coiyer によるこの記事では、ボックスのサイジングについて説明しています。それを理解することはあなたを助けるでしょう。

于 2012-07-08T18:43:23.900 に答える
0

position: relative#box1と#box2 に追加できposition: absoluteます。

この例を参照してください

CSS 位置の説明

于 2012-07-08T16:29:07.133 に答える
0

CSS 

#box1{
    display:block;
    width: 300px;
    height: 300px; 
    background-color:#0000FF;
    border:solid transparent 1px;    
}

#box2{
    margin-top: 30px;
    background-color:#008000;
} ​

HTML

<div id="box1">
    <div id="box2">div 2</div>
</div>​

外側のボックスを空 (テキスト ノードなし) のままにしておくと、この動作が行われます。正直なところ、理由はわかりませんでしたが、ここでその理由を見つけ、問題を解決するためにcollapsed margin追加しました。ただし、代わりに、アウターにパディングを使用できます。SOに関する回答もあります。border:solid transparent 1px; DIV

デモ。

于 2012-07-08T16:33:32.330 に答える