嵌套DIV與CSS的窘境

Question

我tyring巢三個divs並有每個。我希望外觀看起來像每個父級比它的子級大10px，並且在水平寬度變化時能夠響應。當我用兩個DIV做這件事時，一切正常。

CSS

#holder 
{ 
margin:auto; 
width:90%; 
height:150px; 
background-color:#999; 
padding:10px; 
border: 1px solid; 
} 
#inside 
{ 
position:relative; 
width:100%; 
height:100%; 
background-color:#9F0; 
border: 1px solid; 
} 

HTML

當我添加了第三個孩子，這時候就一切都錯了。中間的孩子（綠色的盒子）部分移出父母。

CSS

#holder 
{ 
margin:auto; 
width:90%; 
height:150px; 
background-color:#999; 
padding:10px; 
border: 1px solid; 
} 

#inside 
{ 
position:relative; 
width:100%; 
height:100%; 
background-color:#9F0; 
border: 1px solid; 
padding:10px; 
} 

#header 
{ 
position:relative; 
width:100%; 
height:100%; 
background-color:#C00; 
} 

HTML

<div id="holder"> 
<div id="inside"> 
    <div id="header"/> 
    </div> 
</div> 

我明白填充和利潤率，而這些將增加箱子的 「真實」 的寬度和高度，但我不能弄清楚如何將這些盒子放在一起。事情我已經試過低於

1. 有邊距和填充
2. 不同％的兒童箱的寬度玩耍。這適用於某一點，但取決於瀏覽器窗口的寬度，子節點之間的距離比例會發生變化。

Answer 1

聽起來像級聯型註釋列表。

呃...從#inside和#header中刪除寬度。 DIV是block-level元素。

添加

#holder div { 
    padding-left: 10px; 
} 

每一個DIV下#holder將繼承padding-left CSS屬性。 我認爲（和希望：P）這就是你要找的。