ボックスモデルを切替える box-sizing プロパティ - Web/DB プログラミング徹底解説

CSS では視覚的要素をレイアウトするときには、矩形 (長方形) 領域の箱 (ボックス) を考えます。 それぞれのボックスは、次の４つの領域に分けて考えます。 コンテントエリア ～ 内容を表示する場所 パディング ～ 隙間の領域 (パディングは英語で「詰め物」の意味) ボーダー ～ 境界線を描く領域 マージン ～ ボックスの周囲の隙間領域 それぞれの領域の関係は以下の図の通りです。 さて、この関係を踏まえて box-sizing について説明します。 box-sizing プロパティでボックスモデルを切替える box-sizing プロパティによって、「ボックスモデル」を切替えます。 ボックスモデルを切替える、ということは幅や高さなどのサイズ指定の基準を切替える、ということです。 既定の値はコンテントボックス (content-box) box-sizing プロパティの既定値は cont