CSSボックスモデルの概念の紹介

CSS ボックス モデルは、要素ボックスが要素のコンテンツ、パディング、境界線、マージンを処理する方法を指定します。

CSSボックスモデルの概要

の最も内側の部分が実際のコンテンツであり、コンテンツを直接囲んでいるのがパディングです。パディングは要素の背景を表します。パディングの端が境界線です。境界線の外側にはマージンがあり、デフォルトでは透明であるため、その背後にある要素が隠れることはありません。

ヒント: 背景は、コンテンツ、パディング、境界線で構成される領域に適用されます。

パディング、境界線、およびマージンはすべてオプションであり、デフォルト値はゼロです。ただし、多くの要素には、ユーザー エージェント スタイル シートによって設定されたマージンとパディングが含まれます。これらのブラウザ スタイルは、要素のマージンとパディングをゼロに設定することでオーバーライドできます。

* {
  margin: 0;
  padding: 0;
}

ボックスの両側に 10 ピクセルのマージンと 5 ピクセルのパディングがあると仮定します。この要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。以下の図を参照してください。

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}