CSS ボックスモデル ビジュアライザー
無料のオンライン CSS ボックスモデル ビジュアライザー。マージン・ボーダー・パディング・コンテンツをドラッグしてレイヤーの変化をリアルタイムで確認し、content-box と border-box の違いを理解できます。
CSS ボックスモデル ビジュアライザー
無料のオンライン CSS ボックスモデル ビジュアライザー。マージン・ボーダー・パディング・コンテンツをドラッグしてレイヤーの変化をリアルタイムで確認し、content-box と border-box の違いを理解できます。
CSS ボックスモデルについて
すべての要素は 4 層の入れ子
内側から外側へ、要素は content、padding、border、margin の順です。content はテキストや子要素を保持し、padding はボーダー内側の余白、border は padding を包み、margin は隣接要素を押しのけます。このツールは 4 層すべてを描画し、各プロパティが要素の占有領域をどう広げるかを可視化します。
content-box と border-box の違い
content-box（デフォルト）では width は content のみを設定し、padding と border は外側に加算されるため、要素は設定した width より広くなります。border-box では width は border-box を指し、padding と border は内側から差し引かれて content が縮みます。ここで 2 つのモードを切り替えると、同じ width が 2 つの異なる占有サイズになる様子を確認できます。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
CSS ボックスモデルとは何ですか？
ブラウザがすべての要素のサイズを決める仕組みで、content・padding・border・margin という 4 層の入れ子です。これを理解すると、ほとんどのレイアウトの謎が説明できます。
width を設定したのに要素が広くなります。なぜですか？
デフォルトの content-box では padding と border が width の外側に加算されます。border-box に切り替えると width に padding と border が含まれます。本ツールで正確な数値を確認できます。
データはサーバーに送信されますか？
いいえ。すべてのボックスモデル計算はブラウザ内で実行され、入力した内容が端末外に出ることはありません。