【CSS】box-sizingのcontent-boxとborder-boxの違い｜ プロサバメモ

【CSS】box-sizingのcontent-boxとborder-boxの違い

1. サンプルCSS

高さと幅が100pxの緑とピンクのdivを作り、緑のdivをcontent-box、ピンクのdivをborder-boxを指定。

それぞれのdivには太さ2pxのborderと3pxのpaddingを設定。

content-boxに設定されている緑のdivの高さと幅は、borderとpaddingの値が加算された110px(100+3+3+2+2)となる。

border-boxに設定されているピンクのdivの高さと幅は、borderとpaddingの値を含んで100pxとなる。