2

HTML

<div class="wrap">
    <div class="sub">sub</div>
</div>

CSS

.wrap {
    width: 100px;
    height: 100px;
    background: #565656;
}

.sub {
    background: red;
    margin-top: 100px;
}

サブ div のマージンがボディに対して相対的にラップされ、それ自体がラップに対して相対的にラップされないのはなぜですか? (おそらくこれまでで最もばかげた質問ですが、私は理解できません >< ) http://jsfiddle.net/QJug3/

                                                                                               

4

2 に答える 2

3

マージンが崩壊する不思議な世界へようこそ:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

基本的には次のようになります: 隣接する 2 つの垂直マージンがある場合、そのうちの 1 つだけが使用され、もう 1 つが無視されます。ブラウザーは、ユーザーが通常期待するものではなく、1 つのマージンを持つことを意図していると想定します。つまり、2 つのマージンが互いに加算されます。

目的を達成するための最も簡単な (しかしそれほどエレガントではない) 方法は、wrapdiv にpadding-topofを付け1pxて、マージンが隣接しないようにすることです。

.wrap {
 width: 100px;
 height: 100px;
 background: #565656;
 padding-top: 1px; /* add this */
}
于 2013-01-29T13:13:48.607 に答える
2

Bazzz は、あなたが望むものを達成するための理由を説明しました (私はあなたを理解しています)

http://www.codepen.io/anon/pen/jHqry

.wrap {
    width: 100px;
    height: 100px;
    background: #565656;
  position:relative;
}

.sub {
    background: red;
    top: 100px;
  position:relative;
}
于 2013-01-29T13:15:23.393 に答える