なぜこのマージンは親の外に出るのですか？

Question

私はロゴのためにdiv mainlogoの別の部門の中にdivを持っています。さて、私はそれを上にマージンを与えると、外側のdivの外側に流れます。私が望むのは、私がマージントップを与えるとき、それは親の外側にマージンを流す代わりに、それ自身を下方に移動すべきだということです。

.header { 
 
    width: inherit; 
 
    height: 100px; 
 
    background-color: #0080FF; 
 
    box-shadow: 0.5px 0.5px 0.5px 0.5px grey; 
 
} 
 
.headerdiv img { 
 
    width: 80px; 
 
} 
 
.headerdiv { 
 
    width: 1020px; 
 
    margin: 0 auto; 
 
    height: inherit; 
 
    position: relative; 
 
} 
 
#mainlogo { 
 
    height: 80px; 
 
    width: 350px; 
 
    margin-top: 10px; 
 
}

<div class="header"> 
 
    <div class="headerdiv"> 
 
    <a href="onlinequiz login.php"> 
 
     <div id="mainlogo"> 
 
     <img src="Images/logo.png"></img> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

なぜそれが起こるんし、どのように私はそれを解決することができますか？

Answer 1

トリッキーマージンの仕様を動作します。 This pageには、実行している動作の非常に良い説明があります。 #mainlogoの空白をpaddingに変更しない場合は、にoverflow: hiddenというプロパティを付けて、余白の崩壊を回避できます。

.header { 
 
    width: inherit; 
 
    height: 100px; 
 
    background-color: #0080FF; 
 
    box-shadow: 0.5px 0.5px 0.5px 0.5px grey; 
 
    overflow: hidden; 
 
} 
 
.headerdiv img { 
 
    width: 80px; 
 
} 
 
.headerdiv { 
 
    width: 1020px; 
 
    margin: 0 auto; 
 
    height: inherit; 
 
    position: relative; 
 
} 
 
#mainlogo { 
 
    height: 80px; 
 
    width: 350px; 
 
    margin-top: 10px; 
 
}

<div class="header"> 
 
    <div class="headerdiv"> 
 
    <a href="onlinequiz login.php"> 
 
     <div id="mainlogo"> 
 
     <img src="Images/logo.png"></img> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

また、予期しないクロスブラウザの癖を避けるためにspanと自己終了あなたimgタグに#mainlogodivを変更することを検討することがあります。

Answer 2

beacuseあなたは一般化されたDIVをそのまま使用しています。すなわちフロート浮動プロパティ使用は：そこ、

を残し、それがこのような

、

#mainlogo { 
    float:left; 
    height: 80px; 
    width: 350px; 
    margin-top:20px; 
} 

Answer 3

これを試してください... headerdivのpositionプロパティをposition：absoluteに設定します。

.headerdiv { 
    width: 1020px; 
    margin: 0 auto; 
    height: inherit; 
    position: absolute; 
}