帶有負邊距的填充內部元素的容器不能正常工作

Question

爲什麼.column2具有100％的寬度不會「負出」本身，而負邊距？

爲什麼.column1與auto寬度'out-dent'本身具有負邊距而不是.column2？

* { 
 
    -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%之間的差異。

1. 的padding給container排除了任何保證金崩潰。

2. 對於column1作爲width是自動和display是塊，它填滿所有可用空間它具有和當緣陰性都在此之上，寬度自調整施加。

3. 對於column2作爲width爲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>