親のdivより大きい子divの場合、余白が正しく機能しないのはなぜですか？

Question

親と子の2つのdivがあるとします。親divの幅は200px、子の幅は105％です。今すぐ子供の右端が外側に流れます。ここでは、コードは次のようになります。

.container1 { 
 
       width: 200px; height: 200px; 
 
       border: 1px solid black; 
 
       margin-left: 100px; 
 
} 
 
.container2{ 
 
       width: 105%; 
 
       border: 1px dotted red; 
 
       height: 200px; 
 
       margin-right: 10%; 
 
}

<div class="container1"> 
 
    <div class="container2"></div> 
 
</div>

私の質問しないのはなぜマージン右、子divの上の正または負の値、仕事を持ちますか？一方、margin-leftは正の値と負の値の両方で動作します。

Answer 1

margin-right作業していて、.container2その親よりも大きいですし、効果を確認していないされています。ブラウザは左から右へ、上から下へレンダリングすることを覚えておいてください。

あなたがどんなに目に見える右マージン、.container2幅を持っているしたい場合は、オフトピックfloat: right;

.container2 { 
    width: 105%; 
    border: 1px dotted red; 
    height: 200px; 
    margin-right: 10%; 
    position: relative; 
    float: right; 
} 

Answer 2

マージン値を正または負にすることができます。あなたのコードでは、タイプミスがあります。 それは次のようになります。

margin-right: 10%; 

更新

あなたは子要素にdisplay: inline-blockを使用することができます検査要素をやったときに割り当てられたマージンを見たい場合。しかし、それが親になるように幅を設定するので、それはまだ効果を持たないか、要素をその隣に押し付けません。

.container1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    margin-left: 100px; 
 
} 
 
.container2 { 
 
    width: 105%; 
 
    border: 1px dotted red; 
 
    height: 200px; 
 
    margin-right: 10%; 
 
    display: inline-block; 
 
}

<div class="container1"> 
 
    <div class="container2"></div> 
 
</div>