【CSS】box-sizing - width（横幅）とheight（高さ）の対象

CSSのbox-sizingプロパティについて解説します。

検証環境

CSS

macOS

14.1

box-sizing

box-sizingは“width（横幅）とheight（高さ）の対象”のプロパティです。

標準で要素のwidth（横幅）とheight（高さ）はコンテンツボックスが対象ですが、このプロパティによって対象を任意に変更できます。

基本構文

box-sizing: 値;

値

代表的な値は次の通りです。

値	意味
content-box	width = コンテンツボックス height = コンテンツボックス
border-box	width = コンテンツボックス + パディングボックス + 境界線 height = コンテンツボックス + パディングボックス + 境界線

border-boxは境界線までの領域をwidth・heightとして扱うため、要素のサイズ設計の簡易化に使用することが多くあります。

サンプル

content-box

content-boxはwidthやheightを100%に設定すると、コンテンツボックスのサイズを親要素に合わせます。

そのため、次のようにパディングや境界線を設定した場合、要素全体のサイズは親要素を越えることがあります。

sample.html

<style>
div {
    text-align: center;
}
.parent {
    width: 200px;
    height: 200px;
    border: 5px solid black;
}
.child {
    ___ih_hl_start
    box-sizing: content-box;
    ___ih_hl_end
    width: 100%;
    padding: 10px;
    border: 5px solid red;
}
</style>
 
<div class="parent">
    親要素の領域
    <div class="child">
        子要素の領域
    </div>
</div>

プレビュー

border-box

border-boxはwidthやheightを100%に設定すると、境界線まで（パディングボックス、コンテンツボックスを含む）の領域サイズを親要素に合わせます。

そのため、次のようにパディングや境界線を設定した場合、要素全体のサイズが親要素に収まるようにコンテンツボックスのサイズを自動調整します。

sample.html

<style>
div {
    text-align: center;
}
.parent {
    width: 200px;
    height: 200px;
    border: 5px solid black;
}
.child {
    ___ih_hl_start
    box-sizing: border-box;
    ___ih_hl_end
    width: 100%;
    padding: 10px;
    border: 5px solid red;
}
</style>
 
<div class="parent">
    親要素の領域
    <div class="child">
        子要素の領域
    </div>
</div>

プレビュー