ボックスモデルとは

要素はぜんぶ「箱」

CSS では、見出しも段落も画像も、画面の上ではすべて四角い箱として置かれます。この箱は 4 つの層が入れ子になってできています。

• content — 文字や画像そのものが入る、一番内側
• padding — content と枠線のあいだにとる、内側の余白
• border — 箱のふちに引く枠線
• margin — 箱の外側にとる、となりの箱との距離

内側から content、padding、border、margin の順にならびます。この 4 層がつかめると、「思った位置に来ない」の原因の大半は説明がつくようになります。

まずは箱を目で見えるようにする

背景色がないと、どこからどこまでが 1 つの箱なのかが見えません。たとえばお知らせの箱に薄い黄色を付けると、箱の範囲を見つけやすくなります。演習の枠線は準備済みです。枠線の書き方は後の回で学び、今回は既習の背景色を使って観察します。

.notice-box {
  background-color: #fff7d6;
}

background-color は border の下まで塗られます。border が不透明なら枠線の色に隠れて見えないだけで、背景そのものは枠線の下まで続いています。margin には届かないので、箱と箱のあいだに残った地の色がすきまだとわかります。

同じようにプロフィール写真にも背景色を付けて、画像がどれくらいの箱を占めているのか見てみましょう。

1. .section に background-color を追加し、背景を #ffffff にする。準備済みの枠線で箱のふちを観察する
2. .profile-photo のルールを書き、background-color を #eef2f6 にして画像の箱の範囲を確かめる