負のマージンを持つパディング内側要素を持つコンテナ

Question

.column2は100％の幅で負のマージンを持たないのはなぜですか？

なぜ.column1はではなく、負のマージンの幅で「外へ出る」幅がautoであるのですか？

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    height: 150px; 
 
    width: 450px; 
 
    background-color: cyan; 
 
    padding: 15px; 
 
} 
 

 
.column1 { 
 
    height: auto; 
 
    width: auto; 
 
    background-color: red; 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
} 
 

 
.column2 { 
 
    height: auto; 
 
    width: 100%; 
 
    background-color: green; 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
}

<div class='container'> 
 
    <div class='column1'>hello</div> 
 
    <div class='column2'>hola</div> 
 
</div>

Answer 1

これは実際に明らかにされていませんが、width: autoとwidth: 100%との差として推論することができます。 containerに与えられた

1. paddingはを崩壊任意のマージンを除外する。 column1については

2. widthが自動とdisplayがブロックであるとして、それは負のマージンが幅自動調整、この上に適用されている場合、それは持っているし、すべての利用可能なスペースを埋めます。 widthとしてcolumn2について

3. 幅がと負のマージンがそれに適用され、その包含ブロックの幅にをが計算され、100％である - しかし、計算widthは今変更することはできません。

正と負margin s未満の比較を参照してください。 column2のwidthはすべての場合で同じ値であることに注意してください。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    height: 150px; 
 
    width: 450px; 
 
    background-color: cyan; 
 
    padding: 15px; 
 
} 
 

 
.column1 { 
 
    height: auto; 
 
    width: auto; 
 
    background-color: red; 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
} 
 

 
.column2 { 
 
    height: auto; 
 
    width: 100%; 
 
    background-color: green; 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
} 
 

 
.container.positive > div { 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
}

Negative margin 
 
<div class='container'> 
 
    <div class='column1'>hello</div> 
 
    <div class='column2'>hola</div> 
 
</div> 
 

 
Positive margin 
 
<div class='container positive'> 
 
    <div class='column1'>hello</div> 
 
    <div class='column2'>hola</div> 
 
</div>