スタイルシート(CSS)では、ブロックレベル要素、置換え要素など各要素は、ボックスと呼ばれる四角形の範囲を生成します。例えば、<p>〜</p>又は、
<div>〜</div>等一つの段落などを構成する範囲をボックスと呼びます。ボックスは次の四つの部分から構成されています。
● 内容(content)
テキストや画像など、実際に画面に表示される範囲です。この範囲の高さや幅は、heightプロパティとwidthプロパティで指定します。
● 内容の周りの空間又は内余白(padding)
テキストや画像などの内容が表示される部分と枠線(border)までの間の空間部分のことです。バディングと言います。
● 枠線(border)
パディングを囲む枠のことを示します、ボーダーと言います。
● マージン又は外余白(margin)
枠線(border)の外側の領域を示し、他の要素との間隔を設定します、背景は常に透明で、親要素の背景が透過します。
以上の四つの部分からボックスは生成されて、自由に配置できレイアウトの基本になっています、各ボックスは入れ子にしても使用できます。
● 内容(content)
テキストや画像など、実際に画面に表示される範囲です。この範囲の高さや幅は、heightプロパティとwidthプロパティで指定します。
● 内容の周りの空間又は内余白(padding)
テキストや画像などの内容が表示される部分と枠線(border)までの間の空間部分のことです。バディングと言います。
● 枠線(border)
パディングを囲む枠のことを示します、ボーダーと言います。
● マージン又は外余白(margin)
枠線(border)の外側の領域を示し、他の要素との間隔を設定します、背景は常に透明で、親要素の背景が透過します。
以上の四つの部分からボックスは生成されて、自由に配置できレイアウトの基本になっています、各ボックスは入れ子にしても使用できます。
