すべてのHTML要素はボックスと見なすことができます。

CSS ボックスモデル

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

CSSボックスモデルは基本的に、すべてのHTML要素を囲むボックスです。margin、border、padding、および実際のコンテンツで構成されます。以下の画像は、ボックスモデルを示しています。

各パーツの説明:

• Contents- テキストと画像が表示されるボックスのコンテンツ
• Padding- コンテンツの周囲をクリアします。パディングは透明です
• Border- パディングとコンテンツを囲むボーダー
• Margin- 境界外のエリアをクリアします。マージンは透明

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

要素の幅と高さ

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

計算は次のとおりです。

要素の幅の合計は、次のように計算する必要があります。

要素の合計幅 = 幅 + 左padding + 右padding + 左border+ 右border + 左margin + 右margin

要素の高さの合計は、次のように計算する必要があります。

要素の高さの合計 = 高さ + 上部padding + 下部padding + 上部border + 下部border + 上部margin + 下部margin