固定格與填充增加寬度

Question

我有一個簡單的模板，其中我在中心顯示標題，內容和頁腳部分，標題有背景顏色，所有內容左側&右邊應該有30px填充。

我按照下面的方式使用它，但它增加了寬度。

http://codepen.io/anon/pen/xZapEE?editors=1100

html, body, form { 
    height: 100%; 
    background-color: #fff; 
    height:100%; 
} 

body { 
    font-family: "Open Sans","Trebuchet MS",Verdana,Arial,sans-serif; 
    -webkit-font-smoothing: antialiased; 
    font-size: 13px; 
    line-height: 18px; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    color: #687074; 
    height:100%; 
    background-color: #fff; 
} 
.main-wrapper{ 
    width:1000px; 
    margin:0 auto; 
    position:relative; 
    height:100% !important; 
    padding:0 30px; 
} 
.header-wrapper{ 
    width:100%; 
    min-height:200px; 
    background-color:#f5f5f5; 
    margin:0 auto; 
    position:relative; 
    padding:0 30px; 
} 
.content-main{ 
    width:1000px; 
    min-height:400px; 
    margin:0 auto; 
    position:relative; 
    height:auto; 
    background-color:#ccc; 
} 
.footer-wrapper{ 
    width:1000px; 
    min-height:200px; 
    background-color:#f5f5f5; 
    margin:0 auto; 
    position:relative; 
} 
.header-row1{ 
    float:left; 
    width:100%; 
    height:150px; 
    margin-bottom:15px; 
} 
.header-col1 
{ 
float:left; 
width:132px; 
width:50%; 

} 
.header-col2 
{ 
float:right; 
width:50%; 
} 
.header-col2 > h1{ 
    font-size:60px; 
    text-align:right; 
} 
.header-logo{ 

} 
.header-row2{ 
    float:left; 
    width:100%; 
    height:30px; 
    margin-bottom:15px; 
    padding:0 30px; 

} 

Answer 1

您可以使用box-sizing，以適應它：

box-sizing: border-box; 

箱尺寸值：

內容盒：這是初始和默認值爲由CSS標準指定。測量寬度和高度屬性僅包括內容，但不包括填充，邊框或邊距。

邊框：寬度和高度屬性包括填充和邊框，但不包括邊距。