他のdivを下に移動させる余分なパディングをdivに追加する - CSS？

Question

うまく動作しているフィドルを作成しましたが、余分な左パッドをlef-colに追加しようとすると、他の2つのdivが下に移動します。

私が期待しているのは、埋め込みはdivの内側の内容と外側の境界に適用されますが、この場合はdivの計算に追加されているように見えます。渡すために間違って理解していることを教えてください。

PS - 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; 
} 

フィドル -

Answer 1

box-sizing: border-boxにleft-colを追加すると、box-sizing: border-boxを使用すると、設定された幅にパディングが含まれていることが原因です。

Updated fiddle

---

また、3つの列にbox-sizing: border-box;プロパティを追加CSSのCalc

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

Updated fiddle

Answer 2

を使用して幅のパディングを引くことができます。これには、現在行っている元の寸法の外にではなく、全体の寸法を埋め込むことが含まれます。

Answer 3

paddingは、marginのように、要素で使用される領域を大きくします。 border-boxは、サイズを大きくする代わりに、要素自体からスペースを使用します。

詳しくはhereをご覧ください。