目次

100px

HTML の要素を縦横 100px で表示したい時は、 CSS の width , height プロパティに 100px を指定する事で可能ですが、枠線、パディングも指定している場合、 100px + 枠線 + パディングの寸法で表示される事があるようです。

CSS の box-sizing プロパティに「border-box」値を指定すると、 HTML 要素が 100px 丁度で表示されて、その中に枠線、パディングが描画されるようです。

content-box と border-box
content-box と border-box

目次まで戻る

比較

下記の div 要素(画像になっていますが)は、 width:100px , height:100px の CSS 指定を行っています。黒の枠線と黄色のパディングは 20px になっています。

box-sizing プロパティの値は「content-box」になっています。

この div 要素は縦横 180px で表示されました。緑色のボックス 100px 、黄色のパディング 20×2=40px 、黒の枠線 20×2=40px を足した寸法になっているようです。

box-sizing : content-box の場合です。
box-sizing : content-box の場合です。

box-sizing プロパティの値を「border-box」に変更してみると、以下のように表示されました。縦横 100px で表示されています。

緑色のボックス 20px 、黄色のパディング 20×2=40px 、黒の枠線 20×2=40px を足した寸法になっているようです。

box-sizing : border-box の場合です。
box-sizing : border-box の場合です。

目次まで戻る

サンプルページ

今回のテストに使用したサンプルページは、以下の 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 ビット)

以上、閲覧ありがとうございました。

目次まで戻る

同じカテゴリの投稿( HTML・CSS )

前後の投稿