CSSボックスモデル：マージン、パディング、ボーダー、display
CSSボックスモデル・ビジュアライザー
CSSボックスモデル：マージンとパディングの違い、ボーダー、display | We.Inc
スライダーで内容、パディング、ボーダー、マージンを動かすと、ボックスモデルが描き直されます。box-sizing、マージンの相殺、ボーダーのスタイル、displayのすべての値もその場で比較できます。
すべての要素は入れ子になった長方形として描かれます。中心に内容があり、その外側にパディング（ボーダーの内側の余白で、背景色で塗られます）、さらにボーダー、いちばん外側にマージン（ボーダーの外側の透明な余白で、隣の要素を押し離します）があります。box-sizing: border-boxを指定すると、設定した幅にパディングとボーダーが含まれるため、レイアウトがずっと予測しやすくなります。ボックスがどう並ぶかを決めるのはdisplayプロパティです。
内側から外側へ、4つの層
- 内容（コンテンツ）
- テキスト、画像、子要素を収める
- はい
- ボーダー
- パディングを囲む目に見える線（または線なし）
- ボーダー自身の色
- マージン
- このボックスと隣の要素との間隔
- いいえ、常に透明
4つのスライダーを動かすと、図、実際に計測した合計サイズ、そしてCSSがすべて同時に変わります。ビジュアライザーの下では、box-sizingを切り替えたり、2つのマージンが1つに相殺される様子を見たり、同じ3つの項目でblock、inline、inline-block、flex、grid、noneを並べて比較したりできます。
- 内容エリアの幅と高さを決め、スライダーでパディング、ボーダー、マージンを加えます。
- box-sizingをcontent-boxとborder-boxで切り替え、描画される幅がどう変わるかを確認します。
- マージンも含めて、要素が実際に占める合計の幅と高さを読み取ります。
- 生成されたCSSをコピーし、下へスクロールしてマージンの相殺とdisplayのデモを見ます。
- すべてのスタイルシートの先頭に *, *::before, *::after { box-sizing: border-box; } を追加しましょう。多くのリセットCSSやフレームワークは、すでにこれを含んでいます。
- 背景やクリックできる範囲を広げたいときはパディングを、別々の要素の間に距離を空けたいだけのときはマージンを使いましょう。
- フレックスやグリッドのコンテナでは、子要素のマージンよりgapを使いましょう。端で余白が二重になることがありません。
- アウトラインはボーダーの外側に描かれ、場所を取りません。フォーカスリングにボーダーではなくアウトラインが使われるのはそのためです。
よくある質問
マージンとパディングの違いは何ですか？
パディングはボーダーの内側にあるため、要素の背景で塗られ、クリックできる範囲にも含まれます。マージンはボーダーの外側にあり、常に透明で、要素をほかの要素から離す役割しかありません。また、ブロック同士の上下のマージンは相殺されて1つになることがありますが、パディングが相殺されることはありません。
要素が設定した幅より広くなるのはなぜですか？
初期値のbox-sizing: content-boxでは、幅は内容だけに適用され、その外側にパディングとボーダーが加算されます。20pxのパディングと2pxのボーダーを持つ300pxのボックスは、344pxの幅で描画されます。box-sizing: border-boxに切り替えれば300pxのままで、内容のほうが縮んで収まります。
マージンはどんなときに相殺されますか？
通常フロー内のブロックボックスの上下のマージンは、接したときに1つにまとまります。兄弟要素の間、そしてボーダー、パディング、インラインの内容で隔てられていない親要素と最初または最後の子要素の間で起こります。採用されるのは大きいほうのマージンです。フレックスやグリッドのコンテナの中や、左右方向では相殺は起こりません。
display: noneとvisibility: hiddenの違いは何ですか？
display: noneは要素をレイアウトから完全に取り除くため、その場所は詰められ、スクリーンリーダーも読み飛ばします。visibility: hiddenは場所を確保したまま何も描画せず、内容は支援技術からも隠されます。opacity: 0は場所を残したうえで、クリックやフォーカスも可能なままです。
インライン要素に幅を設定できますか？
できません。spanのような通常のインラインボックスでは、幅、高さ、上下のマージンは無視されます。上下のパディングは描画されますが、行の間隔を押し広げることはありません。inline-blockに変えるか、親をフレックスコンテナにすると、これらのサイズが効くようになります。
content-boxとborder-boxを数値で比べる
- content-boxでは、合計の幅は「幅＋左右のパディング＋左右のボーダー」になります。マージンはさらにその外側に加わります。これは本来のCSSの挙動で、今でもほとんどの要素でブラウザーの初期値になっています。
- border-boxでは、指定した幅はボーダーの外側の端までの長さとして測られます。パディングとボーダーはボックスを広げるのではなく内容エリアを削るので、50%と50%の2カラムレイアウトは、どれだけパディングを足しても1行に収まったままです。
ただの線にとどまらないボーダー
- borderの一括指定では、幅、スタイル、色を順不同で指定できます。スタイルにはsolid、dashed、dotted、double、groove、ridge、inset、outset、none、hiddenがあります。スタイルがnoneのボーダーは、幅に何を書いても幅がゼロになります。border-widthだけを指定した人はこれに驚かされます。
- 現在のブラウザーでは、border-radiusはボーダー、背景、アウトラインの角を丸めます。値が1つなら4つの角すべてを丸めます。スラッシュを使うと横と縦の半径を別々に指定でき、楕円形の角になります。正方形に50%を指定すれば円になります。
displayでボックスはどう変わるか
- ブロックボックスは新しい行から始まり、コンテナいっぱいに広がります。インラインボックスはテキストの行の中を流れ、幅と高さを無視します。inline-blockはテキストのように流れつつ、サイズと上下のマージンを受け付けるので、バッジやボタンに便利です。
- フレックスとグリッドは、要素を外側から見ればブロックに、内側ではレイアウト用のコンテナにします。その子要素はブロックやインラインとしての振る舞いをやめ、代わりにフレックスやグリッドのルールに従い、間隔にはギャップ（gap）が使えます。contentsはボックス自体を取り除き子要素だけを残しますが、アクセシビリティ上の不具合が続いてきた経緯があるため、頼る前にスクリーンリーダーで確認しましょう。
マージンかパディングか？目的で選ぶ
どちらを使うべきか
- 2枚の別々のカードの間に間隔を空けたい
- マージン、または親要素のgap
- フレックスの行で1つの項目だけを反対側の端に寄せたい
- margin-left: auto
- 固定幅のブロックを中央に配置したい
- margin-inline: auto
- 隣の要素と決して相殺されない余白がほしい
- パディング、またはgap
マージンの相殺をその場で見る
1組目は、24pxと40pxのマージンが接する2つの兄弟要素です。間隔は64pxではなく40pxになります。2組目はflow-rootのコンテナの中にあり、親と子のマージンがまとまるのを防いでいます。3組目はフレックスを使っており、何も相殺されません。
兄弟要素と親子の相殺
マージンを編集して間隔の変化を見てみましょう。外側のボックスにpadding-top: 1pxを加えても、親と子のマージンがまとまるのを防げます。
ボーダーのスタイルと角丸
目に見える8種類のボーダースタイルすべて
groove、ridge、inset、outsetはボーダーに陰影をつけて立体感を演出します。4px以上の太さで最もきれいに見えます。
角丸の形：角丸、ピル型、円、楕円
999pxのような非常に大きな半径を指定すると、どんな長さでもピル型になります。正方形に50%を指定すると円になります。
同じ3つの項目で見るdisplayの全値
displayの値の比較
- 値
- 改行されるか
- 幅と高さが効くか
- 主な用途
- Tailwind
- ボックスが取り除かれる
- サイズを決めるボックスがない
- 子要素を親のレイアウトに参加させる
block、inline、inline-block、flex、gridを並べて比較
各行には、width: 80pxとパディングを指定した同じ3つのspanが入っています。幅を無視するのはinlineだけです。
display: none、visibility: hidden、opacity: 0の比較
3つの隠し方の比較
- プロパティ
- 場所を残すか
- クリックやフォーカスができるか
- スクリーンリーダーが読むか
- トランジションできるか
- display: none
- いいえ
- いいえ
- いいえ
- 新しいブラウザーでallow-discreteを使った場合のみ
- visibility: hidden
- はい
- いいえ
- いいえ
- はい、最後または最初に切り替わる
中央の項目を3通りの方法で隠す
visibilityとopacityでは間隔が残り、display: noneでは間隔が詰められることに注目してください。
border-boxのリセット
すべての要素にborder-boxを適用する
疑似要素もボックスなので含めています。TailwindのPreflightには、このルールがすでに入っています。
Tailwindでの書き方
Tailwindのボックスモデル用ユーティリティ（既定の余白スケール、1単位 = 0.25rem）
- border-width: 1px / 2px
- border / border-2
- box-sizing: border-box / content-box
- box-border / box-content
ボックスモデル・ビジュアライザー
マージンの層
描画されたボックス（ボーダーの端）
マージンを含めて占める領域
黄色がマージン、青い線がボーダー、緑がパディング、水色が内容です。
ボーダーの幅
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る