CSSボックスモデル・ビジュアライザー

使い方

1. ボックスモデルの値を入力: フィールドまたはインタラクティブなスライダーでマージン、ボーダー、パディング、コンテンツの寸法を定義します。
2. ビジュアライゼーションを探索: 入れ子になったボックスの古典的な図がリアルタイムで更新されます — マージン(オレンジ)、ボーダー(黄色)、パディング(緑)、コンテンツ(青)、すべて明確にラベル付けされています。
3. CSSをコピー: CSSをコピーをクリックして、設定された要素の完全なボックスモデルプロパティを取得します。

なぜCSSボックスモデルビジュアライザーを使うのか?

CSSボックスモデルはWebレイアウトの最も基本的な概念の1つです — そして特にbox-sizingの値、マージンの結合、ボーダーのサイジングを混合する場合、最も一般的なバグの源の1つです。このインタラクティブビジュアライザーはボックスモデルを具体的で目に見えるものにします: 値を調整すると、マージン、ボーダー、パディングがコンテンツの周りにどのようにスタックするかが即座に表示されます。CSSの学習、デバッグ、教育に不可欠です。

機能

• インタラクティブダイアグラム: 色分けされたレイヤー(マージン、ボーダー、パディング、コンテンツ)を持つ古典的な入れ子ボックスモデルビュー。
• box-sizing切り替え: content-boxとborder-boxを切り替えて、各モードが総寸法にどのように影響するかを確認します。
• 個別の側面: マージン、パディング、ボーダーの上/右/下/左の値を独立して定義します。
• 総サイズ計算: 要素の計算された総幅と総高さを表示します。
• CSS出力: 設定されたボックスモデル用のすぐに使えるCSSを生成します。

よくある質問

content-boxとborder-boxの違いは?

content-box(デフォルト)では、widthとheightはコンテンツエリアにのみ適用されます — パディングとボーダーは要素の総サイズに追加されます。border-boxでは、widthとheightにパディングとボーダーが含まれるため、サイズがより予測可能になります。ほとんどの最新のCSSリセットは、すべての要素にbox-sizing: border-boxを適用します。

マージンの結合とは?

2つの垂直マージンが触れ合う場合(隣接するブロック要素間、または親と最初/最後の子の間)、それらは2つの値の大きい方に等しい1つのマージンに結合します。これは、flexまたはgridの子、またはパディングやボーダーを持つ要素では発生しません。

インライン要素の下にある余分なスペースを取り除くには?

<img>などのインライン要素には、line-heightのベースラインアラインメントによって引き起こされる小さなスペースがその下にあります。要素にdisplay: blockを設定するか、vertical-align: bottom、または親にfont-size: 0を設定して修正します。