ボックスモデルとは
要素はぜんぶ「箱」
CSS では、見出しも段落も画像も、画面の上ではすべて四角い箱として置かれます。この箱は 4 つの層が入れ子になってできています。
- content — 文字や画像そのものが入る、一番内側
- padding — content と枠線のあいだにとる、内側の余白
- border — 箱のふちに引く枠線
- margin — 箱の外側にとる、となりの箱との距離
内側から content、padding、border、margin の順にならびます。この 4 層がつかめると、「思った位置に来ない」の原因の大半は説明がつくようになります。
まずは箱を目で見えるようにする
いまのページは背景も枠線もないので、どこからどこまでが 1 つの箱なのかが見えません。そこで section の箱に背景色と枠線を付けて、境目をはっきりさせます。
.section {
background-color: #ffffff;
border: 1px solid #e5e1d8;
}background-color は border の下まで塗られます。border が不透明なら枠線の色に隠れて見えないだけで、背景そのものは枠線の下まで続いています。margin には届かないので、箱と箱のあいだに残った地の色がすきまだとわかります。
同じようにプロフィール写真にも背景色を付けて、画像がどれくらいの箱を占めているのか見てみましょう。
課題
- .section に background-color で白い背景を付ける
- .section に border で細い枠線を付けて、箱のふちを見えるようにする
- .profile-photo に background-color を付けて、画像の箱の大きさを確かめる