CSS ボックスモデル

すべてのHTML要素はボックスとして考えることができます。

CSS ボックスモデル

CSSでは、デザインやレイアウトについて語る際に「ボックスモデル」という用語が使われます。

CSSボックスモデルは基本的に、すべてのHTML要素を囲むボックスで構成されています。以下の要素からなります：

• コンテンツ： ボックスの中に表示されるテキストや画像
• パディング： コンテンツの周囲にクリアされる領域。パディングは透明です
• ボーダー： パディングとコンテンツの周囲に設定される境界線
• マージン： ボーダーの外側にクリアされる領域。マージンは透明です

ボックスモデルにより、要素の周囲に境界線を追加したり、要素間のスペースを定義したりすることができます。

例

ボックスモデルのデモンストレーション：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

要素の幅と高さ

すべてのブラウザで要素の幅と高さを正しく設定するためには、ボックスモデルがどのように機能するかを理解する必要があります。

重要：CSSで要素の幅と高さプロパティを設定するときは、コンテンツ領域の幅と高さのみが設定されます。要素の実際の幅と高さを計算するには、パディングとボーダーも含める必要があります。

例

この<div>要素は、全体の幅が350px、高さが80pxになります：

div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;

}

計算方法：

• 320px（コンテンツ領域の幅）
• + 20px（左パディング + 右パディング）
• + 10px（左ボーダー + 右ボーダー）
• = 350px（全体の幅）

• 50px（コンテンツ領域の高さ）
• + 20px（上パディング + 下パディング）
• + 10px（上ボーダー + 下ボーダー）
• = 80px（全体の高さ）

要素の全体の幅は以下のように計算されます：

要素の全体の幅 = 幅 + 左パディング + 右パディング + 左ボーダー + 右ボーダー

要素の全体の高さは以下のように計算されます：

要素の全体の高さ = 高さ + 上パディング + 下パディング + 上ボーダー + 下ボーダー

注意：マージンプロパティは、ボックスがページ上で占める総スペースに影響しますが、実際のボックスのサイズには含まれません。ボックスの全体の幅と高さはボーダーで止まります。