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

  1. ホーム
  2. HTML・CSS
  3. 基礎26. ボックスモデル

基礎26. ボックスモデル

  1. 公開日:2016年05月25日
  2. 最終更新日:2022年08月08日

HTML・CSS

この記事をシェアする:

ボックスモデルとは

タグで囲むとボックスという四角形の領域が形成されます。ボックスはどんな要素であっても必ず形成されます。ボックスはテキストや画像などの内容領域(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プロパティの影響を受ける