# ボックスモデル
HTMLのタグは、ページ上で**ボックス**という領域を生成します。
この**ボックス**には大きく分けて、**ブロックボックス**と、**インラインボックス**の二種類が存在します。
タグによって、どちらのボックスを生成するかは決まっています。
## ブロックボックス
**ブロックボックス**は内容に関係なく、**ウィンドウの横幅いっぱい**に広がり、
要素の前後で改行され、基本的に**上から下**に配置されていきます。
特徴として、**width**(幅)と**height**(高さ)、上下左右の**margin**と**padding**(余白)を変更できます。
**width**や、**height**、**margin**や**padding**に関しては、次章にて説明します。
ブロックボックスは、hタグやpタグ、divタグ、ulタグ、olタグ等が該当します。
以下のようなhtmlとcssを記述した場合、
```html
block1
block2
block3
```
```css
.block1 {
background-color: green;
}
.block2 {
background-color: red;
}
.block3 {
background-color: blue;
}
```
以下のように、要素が横幅いっぱいに広がり、
記載した順に、上から下に配置されることがわかります。
## インラインボックス
一方**インラインボックス**は、**内容分の幅と高さのみ**で、要素の前後で改行されず、**左から右**に配置されていきます。
特徴として、widthを指定できず、marginは左右の指定ができません。
インラインボックスはaタグやimgタグ、spanタグ、strongタグ等が該当します。
以下のようなhtmlとcssを記述した場合、
```html
ブロックボックス
inline1
inline2
inline3
```
```css
.inline1 {
background-color: green;
}
.inline2 {
background-color: red;
}
.inline3 {
background-color: blue;
}
```
以下のように、記載した順に、左から右に配置されることがわかります。
