ラッパーdivが下に移動するのはなぜですか？

Question

非常にユニークな状況に直面しています。次のコードでは、すべてのdivは1つの大きな親の.wrapper div内にネストされています。 .wrapperプロパティでは、位置決め（上端/左端）を0pxと0pxと明確に定義しています。しかし、それはまだ少し下にシフトしており、その結果ページ全体の内容が下にシフトし、その結果、上に空白が残っています。

サイトの背景色は黒です。上部の画像ホルダーのdiv（灰色）と他のdivが少し下に移動しています。

*{ 
 
    box-sizing:border-box; 
 
} 
 

 
html,body { 
 
    margin: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    background-color: rgba(0,0,0,1); 
 
    padding: 0px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 

 
.wrapper { 
 
    height: 725px; 
 
    max-width: 960px; 
 
    margin-left: auto; 
 
    left: 0px; 
 
    top: 0px; 
 
    background-color: rgba(255,0,0,1); 
 
    margin-right: auto; 
 
    position: relative; 
 
    padding: 0px; 
 
} 
 

 
.topimage { 
 
    width: 100%; 
 
    max-width: 960px; 
 
    height: 100%; 
 
    max-height: 175px; 
 
    background-color: #666; 
 
    position: absolute; 
 
    top: 0px; 
 
    font-size: 36px; 
 
    color: #FFF; 
 
    text-align: center; 
 
    border: thin solid #FFF; 
 
} 
 

 
.topimage img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    border-radius: 15px 15px 0px 0px; 
 
} 
 

 
.menu { 
 
    background: linear-gradient(#0F1A9B, black 100%); 
 
    height: 100%; 
 
    max-height: 50px; 
 
    max-width: 960px; 
 
    position: relative; 
 
    top: 175px; 
 
} 
 

 
.list { 
 
    color: rgba(255,255,255,1); 
 
    text-decoration: none; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    /* [disabled]background-color: rgba(255,0,0,1); */ 
 
    padding: 0px; 
 
    width: auto; 
 
    /* [disabled]position: relative; */ 
 
    height: 100%; 
 
    font-family: "MS Serif", "New York", serif; 
 
    font-weight: normal; 
 
    font-size: 18px; 
 
} 
 

 
.list li { 
 
    display: inline-block; 
 
    margin-right: 0%; 
 
    margin-left: 2.5%; 
 
    width: 10%; 
 
    text-align: center; 
 
    /* [disabled]background-color: rgba(0,51,255,1); */ 
 
    position: relative; 
 
    padding: 0px; 
 
    /* [disabled]float: left; */ 
 
    line-height: 50px; 
 
    vertical-align: top; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #0F1A9B; 
 
    position: relative; 
 
    top: 175px; 
 
    padding-right: 0.5%; 
 
    padding-left: 0.5%; 
 
} 
 

 
.leftcontent { 
 
    background-color: rgba(210,238,252,1); 
 
    float: left; 
 
    height: 100%; 
 
    max-height: 500px; 
 
    width: 100%; 
 
    max-width: 85%; 
 
    top: 0px; 
 
    position: relative; 
 
    border-left-color: rgba(205,205,205,1); 
 
    padding-right: 0.5%; 
 
    padding-left: 0.5%; 
 
} 
 

 
.rightcontent { 
 
    background-color: rgba(51,177,236,1); 
 
    float: right; 
 
    height: 100%; 
 
    max-height: 500px; 
 
    width: 100%; 
 
    max-width: 15%; 
 
    position: relative; 
 
    top: 0px; 
 
    /* [disabled]margin-right: 0.3%; */ 
 
} 
 

 
.footer { 
 
\t 
 
}

<div class="wrapper"> 
 
    <div class="topimage"> 
 
    Top Image 
 
    </div> 
 
    <div class="menu"> 
 
    <ul class="list"> 
 
     <li><a href="home.html">Home</a></li> 
 
     <li><a href="products.html">Products</a></li> 
 
     <li><a href="services.html">Services</a></li> 
 
     <li><a href="about.html">About Us</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="leftcontent"> 
 
     <h1>Home page</h1> 
 
    </div> 
 
    <div class="rightcontent"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

それはmargin collapsingです：

何ボーダー、パディング、インラインコンテンツ、またはその最初の子のブロックのmargin-topからブロックのmargin-topを分離する隙間が存在しない場合ブロックのmargin-bottomをから分離するために、ボーダー、パディング、インラインコンテンツなし、height、min-height、またはmax-height最後の子のの場合、そのマージンは崩壊します。 折りたたまれた余白は親の外側で終わります。

例では、.topimageは絶対的な位置に設定されているため、通常のコンテンツフローから外れています。兄弟のデフォルトの上余白は.wrapperの外側に崩壊します。ul

.list { 
    margin-top: 0; 
} 

をあるいは、親コンテナdivにoverflow:autoを追加します。

それを修正するには、ulのデフォルトのトップマージンをリセットすることができます。

.wrapper { 
    overflow: auto; 
}