CSS ボックス(ボックスモデル)

face ルール

CSSフレームモデルは、ウェブページ上で要素を直感的に配置する方法を説明しています。

ボックスモデルとは何か

表示できる各要素は、1つまたは複数の矩形フレームを含んでいます。CSSフレームモデルは、これらの矩形フレームをウェブページ上に配置する方法を説明しています。これらのフレームは異なる属性を持ち、異なる方法で相互作用することができますが、各フレームには内容エリアがあり、オプションの周囲のマージン、マージン、ボーダーがあります。

以下の図は、margin、padding、borderのCSS属性が要素がウェブページ上で占める可能な空間をどのように決定するかを示しています。

要素の幅と高さ width通常、CSSを使用する際には、heightおよび

属性が要素の幅と高さを設定する場合、実際には、要素の内容エリアの幅と高さのみを設定しています。要素のフレームの実際の幅と高さは、いくつかの要因に依存しています。

次の章で説明される、異なる属性の使用方法。