爲什麼邊界導致div溢出容器？

Question

我有一個部分設置爲一個固定的寬度和一個100％寬度的div裏面有5個像素的邊框。

看起來不錯，但你可以告訴包含div有點偏離中心，它不會沒有邊界，我需要匹配客戶端組件。

的代碼是相當簡單：

#info { 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
} 
 
.info-box { 
 
    border: 5px solid #0033A0; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 48px 0; 
 
    width: 100%; 
 
}

<section id="info"> 
 
    <div class="info-box">SOME CONTENT</div> 
 
</section>

我能想到的唯一的事情就是讓.info-box的寬度是98％或類似的東西，但是這仍然不會真正的工作。那麼會有什麼？

順便說一句，我已經嘗試添加相對定位，將顯示設置爲inline而不是inline-block ....都沒有工作。

Answer 1

添加box-sizing: border-box;您info-box類

.info-box { 
    background: rgba(248, 243, 232, 0.5) none repeat scroll 0 0; 
    border: 5px solid #0033a0; 
    box-sizing: border-box; 
    display: inline-block; 
    padding: 48px 0; 
    text-align: center; 
    width: 100%; 
} 

box-sizing是更好地在這裏解釋https://css-tricks.com/box-sizing/