1

マージンについて混乱しています。div コンテンツ内にロゴがあります。div ロゴに margin-top を指定すると、このマージンがコンテンツとページの間に表示されます。なんで？

例を次に示します: http://jsfiddle.net/bCkpb/

CSS:

#content {
    position:relative;
    margin:0 auto;
    width:300px; height:250px;
    background-color:blue;
}

#logo {
    margin:20px auto; /* Why this 20px appear between the page and the content? */
    width:120px; height:120px;
    background:yellow;
}

HTML:

<div id="content">
    <div id="logo"> </div> 
</div>
4

1 に答える 1

1

これは、ブロック レベル要素の上マージンとその最初のブロック レベルの子の上マージンが常に折りたたまれるためです(境界線、パディング、ライン ボックス、またはクリアランスによって分離されていない限り)。この動作を防ぐ 1 つの方法は、 divoverflowに表示されない値を追加することです。#contentの表示値#contentを inline-block に変更することもできます。

http://jsfiddle.net/bCkpb/3/

于 2013-07-25T14:42:52.647 に答える