目次
100px
HTML の要素を縦横 100px で表示したい時は、 CSS の width , height プロパティに 100px を指定する事で可能ですが、枠線、パディングも指定している場合、 100px + 枠線 + パディングの寸法で表示される事があるようです。
CSS の box-sizing プロパティに「border-box」値を指定すると、 HTML 要素が 100px 丁度で表示されて、その中に枠線、パディングが描画されるようです。

比較
下記の div 要素(画像になっていますが)は、 width:100px , height:100px の CSS 指定を行っています。黒の枠線と黄色のパディングは 20px になっています。
box-sizing プロパティの値は「content-box」になっています。
この div 要素は縦横 180px で表示されました。緑色のボックス 100px 、黄色のパディング 20×2=40px 、黒の枠線 20×2=40px を足した寸法になっているようです。

box-sizing プロパティの値を「border-box」に変更してみると、以下のように表示されました。縦横 100px で表示されています。
緑色のボックス 20px 、黄色のパディング 20×2=40px 、黒の枠線 20×2=40px を足した寸法になっているようです。

サンプルページ
今回のテストに使用したサンプルページは、以下の URL で見る事が出来ます。当ブログの画像フォルダにアップロードした HTML ファイルになっています。
- css box-sizing のテスト
- https://pulogu.net/wordpress/wp-content/uploads/2023/11/box-sizing.html
HTML ソースコード :
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>css box-sizing のテスト</title> <link rel="stylesheet" href="" type="text/css" media="all" /> <script type="text/javascript"> function test(b){ let a=document.getElementById("a"); a.style.boxSizing=b; } </script> <style type="text/css"> body{ margin: 0; padding: 0; } #a{ box-sizing: content-box; margin: 20px; padding: 20px; width: 100px; height: 100px; border: solid 20px black; background-color: yellow; } #b{ margin: 0; padding: 0; width: 100%; height: 100%; background-color: lime; } </style> </head> <body> <div id="a"> <div id="b"></div> </div> <div style="margin:20px;"> <button style="font-size:24px;" onclick="test('border-box');">box-sizing : border-box に設定</button> <br /> <button style="font-size:24px;" onclick="test('content-box');">box-sizing : content-box に戻す</button> </div> <p style="margin:20px;">css box-sizing のテストページです。</p> </body> </html>
テスト環境
- Windows 10(64 ビット)
- Mozilla Firefox 119.0.1 (64 ビット)
以上、閲覧ありがとうございました。