自舉 - 填充在跨度使得更大

Question

<div class="row"> 
     <div id="cover" class="span12"></div> 
    </div> 
    <div class="row"> 
     <div id="first_left" class="span6 left"> 
      <h3>aa</h3> 

     </div> 
     <div id="first_right" class="span5"> 
      ee 
     </div> 
    </div> 

而較少：

#cover{ 
    background: url('couv.jpg') no-repeat; 
    width: 960px; 
    height: 280px; 
} 

h3{ 
    color: #212121; 
    font-size: 18px; 
    font-weight: normal; 
    float: left; 
    text-transform: uppercase; 
    margin: 0 0 25px 0; 
    text-shadow: 1px 2px 2px #FFF; 
} 

.left{ 
    background: url('grille.jpg'); 
    padding: 15px; 
} 

的「first_right」跨度顯示下面first_left，且僅當該15像素填充存在。使用填充15時，first_left變爲490px而不是460px。這是爲什麼 ？ 另外，如果我想在其中嵌入更多行，可以在跨度上填充填充嗎？

Answer 1

box-sizing的默認值爲content-box。這不包括padding。 padding擴展了元素的寬度（如果設置了）。您需要設置border-box以在元素寬度中包含padding和borders。

.left{ 
    background: url('grille.jpg'); 
    padding: 15px; 
    box-sizing: border-box; 
} 

現在寬度包括填充和邊框。

Read more about box-sizing