CSSボックスモデル

CSSは各要素を1つ以上のボックスとしてレイアウトします。基本的なボックスは、内側から外側に向かって、コンテンツ、パディング、ボーダー、マージンで構成されます。宣言されたサイズがどの辺を制御するかを特定して初めて、幅の計算が予測可能になります。

コンテンツとボーダーのサイズ指定 #

初期のbox-sizing値はcontent-boxです。

css

.card {
  box-sizing: content-box;
  width: 20rem;
  padding: 1rem;
  border: 0.25rem solid;
}

描画されるボーダーボックスの幅は22.5remです。コンテンツ20 rem、水平パディング2 rem、ボーダー0.5 remで構成されます。

border-boxには、宣言されたサイズにパディングとボーダーが含まれます。

css

.card {
  box-sizing: border-box;
  width: 20rem;
  padding: 1rem;
  border: 0.25rem solid;
}

コンテンツ幅は17.5remになりますが、ボーダーボックスは20 remのままです。border-boxはコンポーネントに便利です。パディングを追加しても、宣言された割合または固定幅が割り当て範囲からあふれないためです。マージンはどちらのサイズモデルでも外側に残るため、占有領域が宣言されたサイズより広くなることがあります。

ボーダーボックスのサイズ指定を一貫して適用する #

box-sizingはデフォルトでは継承されません。継承されるリセットを使用すると、必要に応じてコンポーネントがルート値を上書きできます。

css

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

疑似要素を含めることも重要です。装飾用のボーダーや生成されたコンテンツもボックスを作成するためです。

マージン、パディング、オーバーフロー #

パディングは要素に属し、その背景が適用されます。マージンはボーダーの外側にあり、透明のままです。通常フローにおけるブロック間の垂直マージンは相殺されることがあります。パディング、ボーダー、フレックスレイアウト、グリッドレイアウト、新しいブロックフォーマッティングコンテキストによって、この挙動は変化します。

フレックスまたはグリッドのアイテム間、フロート、絶対配置されたボックス間では、マージンは相殺されません。また、ボーダーフォーマッティングコンテキストの境界をまたいでも相殺されません。ボーダー、パディング、インラインコンテンツ、クリアランス、新しいフォーマッティングコンテキストによって分離されていない場合、親と最初または最後の子のマージンは相殺されることがあります。

割合指定のパディングとマージンは、包含ブロックのインラインサイズを基準に解決されます。これには、水平書字モードにおける垂直パディングも含まれます。個々のアイテムではなくレイアウトに間隔を持たせる場合は、フレックスおよびグリッドコンテナ内でgapを優先してください。

overflowは、パディングボックスを超えるコンテンツを制御します。

css

.panel {
  max-block-size: 24rem;
  overflow: auto;
}

従来型のスクロールバーはボーダーボックス内の空間を消費します。オーバーレイスクロールバーは消費しないため、スクロールバーの幅をハードコーディングしないでください。

css

.panel {
  scrollbar-gutter: stable;
}

scrollbar-gutterは従来型のスクロールバー用の領域を確保し、オーバーフローが始まったときのレイアウトシフトを防止できます。オーバーレイスクロールバーに対しては、表示されるガター効果はありません。

内在サイズと最小値 #

フレックスおよびグリッドのアイテムには、min-contentの寄与から導出できる自動最小サイズがあります。そのため、分割トラックまたはフレックスアイテムが伸縮可能に見える場合でも、改行できない長いトークンによってレイアウトがオーバーフローすることがあります。明示的に縮小を許可してください。

css

.content {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

画像などの置換要素には、内在する寸法とアスペクト比があります。歪みなしで制約してください。

css

img,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

論理プロパティ #

論理プロパティは、書字モードを基準にした寸法を表します。

css

.notice {
  inline-size: min(100%, 40rem);
  padding-block: 1rem;
  padding-inline: 1.5rem;
  border-inline-start: 0.25rem solid currentColor;
}

inline-sizeは水平書字モードにおける幅に対応し、block-sizeは高さに対応します。論理プロパティは、右から左へ記述するテキストや垂直書字モードでも、レイアウトの意図を維持します。

ブラウザーの計測APIは異なる辺を公開します。clientWidthにはパディングが含まれ、offsetWidthにはボーダーが含まれ、getBoundingClientRect()は変形後のボーダーボックスを返します。固定値で補正するのではなく、対象のボックスに一致するAPIを選択してください。