paddingとborderを幅と高さに含める

最近までちまちまpaddingとか計算してサイズ調整をしていた自分が馬鹿みたいに思えます。
たった一行書くだけだったとは・・・!

html

<h3>paddingとborderを幅と高さに含める</h3>

<div id="sample1">
padding:20px<br>
 border:5px solid #963839;
</div>

<h3>paddingとborderを幅と高さに含めない</h3>
<div id="sample2">
padding:20px<br>
 border:5px solid #963839;
</div>

css

/*box-sizing:border-box;でpaddingとborderを幅と高さに含める*/
#sample1 {
  width:300px;
  height:300px;
  background:#F6A34D;
  padding:20px; 
  border:5px solid #963839;
  box-sizing: border-box;
}

#sample2 {
  width:300px;
  height:300px;
  background:#F6A34D;
  padding:20px; 
  border:5px solid #963839;
}

paddingとborderを幅と高さに含める

padding:20px
border:5px solid #963839;

paddingとborderを幅と高さに含めない

padding:20px
border:5px solid #963839;
  • コーダーのための計算機