向div添加額外的填充，導致其他div向下移動 - CSS？

Question

我創建了一個工作正常的小提琴，但每當我試圖添加一個額外的左填充到lef-col，其他兩個div向下移動。

我期待的是，填充適用於div的內部內容和外部邊界，但在這種情況下，它看起來像是增加了div計算。讓我知道我錯誤地理解了傳球。

PS-I通過將box-sizing: border-box應用於left-col進行了修正。我找e.xplanation這個原因不是解決方案（雖然替代解決方案也歡迎！）

碼 -

HTML -

<div class="container"> 
     <div class="left-col"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p> 
     </div> 
     <div class="mid-col"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p> 
     </div> 
     <div class="right-col"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p> 
     </div> 
    </div> 

CSS -

*, html { 
    margin: 0; 
    padding: 0; 
} 

body {} 

.container { 
    padding: 20px; 
    overflow: hidden; 
} 

.left-col, .mid-col, .right-col { 
    width: 33.3%; 
    float: left; 
} 

.left-col { 
    background: lightpink; 
} 

.mid-col { 
    background: lightgreen; 
} 

.right-col { 
    background: lightblue; 
} 

小提琴 - https://jsfiddle.net/km2brd8m/

Answer 1

如果您將box-sizing: border-box添加到left-col它將起作用，原因是當使用box-sizing: border-box時，填充值將包含在設置寬度中。

Updated fiddle

---

您也可以使用CSS計算器

.left-col { 
    width: calc(33.3% - 20px); 
    background: lightpink; 
    padding-left: 20px; 
} 

Updated fiddle

Answer 2

的box-sizing: border-box;屬性添加到三列減去寬度的填充。這將包括填充它的整體尺寸，而不是像目前所做的那樣超出原始尺寸。

Answer 3

padding增加了元素使用的空間，就像margin一樣。 border-box使它從元素本身使用空間，而不是增加其大小。

您可以閱讀更多關於它here。