872 Style
  1. TOP
  2. MEMO
  3. CSS
  4. ボックスについて

ボックスについて

各要素ごとに生成される四角い領域のことをボックスと呼びます。ボックスは4つの部分から、構成されています。各部分ごとに余白を自由に設定できます。

margin(マージン)

padding(パディング)

content(内容)

 

 

Margin::マージン

ボックスの一番外側の領域を Margin と呼びます。隣接するボックスがない場合は、親要素との間隔となります。この部分には要素に指定した背景色などは表示されず、常に透明な領域になります。

Border::枠線

ボックスの周りに表示される枠線のことを Border と呼びます。

Padding::余白

Border 部分と Content 部分との間の余白部分を Padding と呼びます。マージンでは要素に指定した背景色などは表示されませんが、余白では要素に指定した背景色などは表示されます。Border から Content までの間隔のデザインに使用します。

Content::内容

文字列や画像などを表示する領域のことを Content と呼びます。幅を指定する width 属性や、高さを指定する heigth 属性はこの領域のサイズを指定します。