divs的寬度問題

我不明白爲什麼這兩個div的寬度不同。我的目標是在頁面的每一側都有空白。此外，我不明白爲什麼當他們應該是平等的時候，左側比右側有更多的空間。divs的寬度問題

body { 
    margin-left: 9%; 
    margin-right: 9%; 

} 

.nav { 
    float: left; 
    width: 100%; 
    height: 10px; 
    padding-top: 3px; 
    padding-bottom: 10px; 
    background-color: green; 
} 

.logo { 
    clear: both; 
    width: 100%; 
    height: 100px; 
    background-color: #C7D0D5; 
    padding: 20px; 
}

來源

2015-12-02 srysry

不知道你在那裏分享了合適的小提琴 – cameronjonesweb

@cameronjonesweb它應該在那裏！在結束之前忘了保存它 – srysry

，它把它添加到大小，所以你.logo的寬度爲100 ％+ 40px。要解決此問題，請將框設置爲邊框。

.logo { 
    clear: both; 
    width: 100%; 
    height: 100px; 
    background-color: #C7D0D5; 
    padding: 20px; 
    box-sizing: border-box; 
}

來源

2015-12-02 23:39:23 cameronjonesweb

你缺少你的DIV box-sizing: border-box;，當你添加填充補白的增加有總寬度

來源

2015-12-02 23:38:49 vergilius

看一看箱集束性從而改變利潤的行爲，以更直觀的方式：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

來源

2015-12-02 23:39:59 pierrebeitz

這是因爲你被設置爲20px的.logo填充。所以你會在你的.logo的左側和右側獲得更多20px的寬度。

嘗試將其刪除或添加「box-sizing：border-box;」所以即使給予填充，你的.logo寬度也不會擴大。

來源

2015-12-02 23:46:29 Sing2

divs的寬度問題

回答

相關問題