paddingとborderを幅と高さに含める
最近までちまちまpaddingとか計算してサイズ調整をしていたんですが、たった一行書くだけだったとは・・・！
<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>
/*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;
border:5px solid #963839;
paddingとborderを幅と高さに含めない
padding:20px
border:5px solid #963839;
border:5px solid #963839;
