目次
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 ビット)
以上、閲覧ありがとうございました。
