0

以下のスニペットの内側の div に 10 ピクセルの上下のマージンが適用されない理由が不思議です。内側の表示プロパティを「インラインブロック」に設定すると、期待どおりに上下の余白が適用されます。

jsFiddle の例

HTML:

<div class="outer">
    <div class="inner">
        My content...
    </div> 
</div>

CSS:

.outer {
    background-color: lightgrey;
}   
.inner {
    background-color: green;
    padding: 50px;
    width: 600px;
    margin:10px;
    display: block; /* No top, bottom margins applied.  Does apply them with "inline-block".  Why? */ 
}
4

1 に答える 1

1

.inner top margin が崩壊しています。

簡単な解決策は、アウターを作ることdisplay:inline-blockですpadding:10px。アウターを着て、インナーに余白を付けないでください。

于 2013-07-18T19:07:04.207 に答える