HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎26. ボックスモデル

      2019/04/03   hatano

ボックスモデルとは

タグで囲むとボックスという四角形の領域が形成されます。ボックスはどんな要素であっても必ず形成されます。ボックスはテキストや画像などの内容領域(Content Area)とそれを取り囲むように外側に線(border)。その外側に外余白(margin)の領域を作ることができます。ボックスの内側には内余白(padding)の領域が作ることができます。

ボックスモデル

ボックスモデルに影響あたえるプロパティ

ボックスモデルは下記のプロパティの影響を受けます。

box-sizingは、padding, borderをボックスモデルの幅、高さに含めるかどうか。displayは、width, height, margin, paddingの指定に影響が出ます。
displayプロパティは、ブラウザのデフォルトCSSであらかじめ指定がされていることがほとんどです。各要素にどんなdisplayの値が指定されているかを知っておくことが重要です。「基礎20. デフォルトCSSとリセットCSS」でGoogle Chromeのデベロッパーツールを使用したデフォルトCSSの確認方法を紹介しています。

まとめ

  • タグで囲むと「ボックス」という領域が作られる
  • ボックスモデルには、外余白(margin)、線(border)、内余白(padding)という領域を作ることができる
  • ボックスモデルは、box-sizingプロパティとdisplayプロパティの影響を受ける