4

ネストされたブロックがいくつかdivありますが、最後のブロックleft_navigation_containerの下部マージンに7pxの間隔がなく、理由がわかりません（jsfiddle）。

HTML：

<div class="left_navigation_outer">
    <div class="left_navigation_header_outer">
        <div class="left_navigation_header_logo">
            <strong>Title</strong>
        </div>
    </div>
    <div class="left_navigation_container">
    </div>
</div>

CSS：

div.left_navigation_outer {
    background: green;
    background-repeat: repeat;
    margin:10px;
    -moz-box-shadow:  0px 0px 5px #ababab;
    -webkit-box-shadow:  0px 0px 5px #ababab;
    box-shadow:  0px 0px 5px #ababab;
}


div.left_navigation_header_outer {
    background: blue;
    background-repeat: repeat;
    height: 50px;
    border-top: 4px solid black;    
}

div.left_navigation_header_logo {
    line-height:50px;
    color: #efefef;
    text-shadow: 0 -1px #000;
    text-align: center;
    text-transform: uppercase;
}

div.left_navigation_container {
    background: red;
    background-repeat: repeat;
    height: 50px;
    margin: 7px;
}
4

3 に答える 3

3

あなたの問題は、この要素のマージンを計算する方法によって引き起こされます-それは、親の位置ではなく、その兄弟を参照します。

「TITLE」テキストを含む他のdivにマージンを設定し、margin-topで同じ問題を確認できます。

編集：あなたは下マージンをトリガーしてそれを見えるようにするために<div style="width: 100%; height: 1px;"></div>後に追加することができます。<div class="left_navigation_container"></div>

于 2013-01-11T13:37:20.870 に答える
1

あなたはそれを与えることによってそれを修正することができdiv.left_navigation_outerますpadding-bottom

于 2013-01-11T13:15:25.453 に答える
1

奇妙な...理由はわかりませんが、パディングボトム1pxを追加するdiv.left_navigation_outerと修正されます-これが私のフィドルのフォークです

div.left_navigation_outer {
    background: green;
    background-repeat: repeat;
    margin:10px;
    -moz-box-shadow:  0px 0px 5px #ababab;
    -webkit-box-shadow:  0px 0px 5px #ababab;
    box-shadow:  0px 0px 5px #ababab;
    padding-bottom:1px; /* tricky hack to get the bottom spacing */
}
于 2013-01-11T13:18:35.583 に答える