CSSボックスモデル可視化
content-boxとborder-boxを実際のCSSピクセルで比較します。大きい図はスクロールでき、内容寸法0は0のままです。
CSSボックスモデル可視化
図は実際のCSSピクセルです。大きい図はスクロールできます。幅と高さ: 1～1,200、均一な余白と枠線: 0～100 px。
- 外側余白
- 枠線の太さ
- 内側余白
- 内容の寸法
使い方
使い方
- 幅と高さを1～1,200 px、均一な外側余白、枠線、内側余白を0～100 pxに設定します。
- コンテンツボックスかボーダーボックスを選び、各層と寸法を確認します。
- CSSをコピーするかリセットします。空欄や不正な値は結果を消し、コピーを無効にします。
寸法の式
content-box: 内容=宣言寸法、要素=宣言寸法+2×(内側余白+枠線)。border-box: 要素=max(宣言寸法, 2×(内側余白+枠線))、内容=max(0, 宣言寸法−2×(内側余白+枠線))。共通: 外側寸法=要素+2×外側余白。幅と高さを別々に計算します。
最小寸法と範囲
空欄は使えず、範囲内の有限値が必要です。ボーダーボックスの内側余白と枠線が宣言寸法を超えると内容は0になり、要素寸法は最小占有を保ちます。外側余白は要素の外です。
図の縮尺
計算の1ピクセルを1 CSSピクセルで表示し、画面に合わせて縮小しません。表示領域は高さ360 CSSピクセルで、大きい図は縦横にスクロールします。各層は明示的なcontent-boxで、追加余白や内容の最小寸法はありません。凡例が色を説明します。
よくある質問
あわせて知りたいこと
図は画面に合わせて縮小しますか？
いいえ。実際のCSSピクセルを使い、表示領域を超える場合はスクロールします。寸法は縮小前のCSS計算値です。
外側余白は要素自体を大きくしますか？
外側の空間を増やしますが、要素の実寸法は変えません。均一な余白のみを扱い、余白の相殺や内容固有の寸法は扱いません。