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的宽度问题

回答

相关问题