4-2 CSS ボックスモデル

# １．ボックスモデルとは

Chromeデベロッパーツールに表示されている下記のような画像について説明します。
HTMLの要素(タグ)はどの要素も`ボックス`と呼ばれる四角形の領域を生成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/36a47d15-e9ad-d757-feec-c49cf9118b2b.png)

content（コンテンツ）
テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。

padding（パディング）
content と border の間にある余白の領域です。要素の内側の余白を取るために使います。この領域のサイズは padding プロパティで指定することができます。

border（ボーダー）
padding の外側にある領域、いわゆる枠線です。この領域のサイズは border-width プロパティで指定することができます。

margin（マージン）
ボックスの一番外側の余白の領域です。この領域のサイズは margin プロパティで指定することができます。


# ２．ブロックボックスとインラインボックス

- `ボックス`は`ブロックボックス`と`インラインボックス`の2種類に分けられます。
- CSSのdisplayプロパティの値によってボックスの種類が決まります。

#### 2.1 ブロックボックスの特徴

- 要素の幅に関係なく、<font color="red">上から下へ縦方向に配置される。</font>（ブロックボックスの前後には改行が伴って、1つの段落としてレイアウトされる）
- 幅（width）や高さ（height）を指定できる。※幅を指定しなければ親要素の幅全体に広がる。
- 上下左右の margin 、padding を指定できる
- displayプロパティのデフォルトは`block`です。

#### 2.2 ブロックレベル要素のタグ例

```html
<div>、<p>、< ul>、< ol>、<li>、<table>など
```

#### 2.3 インライン要素の特徴

- 幅・高さを指定できない
- 上下マージンを設定できない
- 左から右へ横方向に配置される（改行されない）
- displayプロパティのデフォルトは`inline`です。

#### 2.4 インライン要素のタグ一例

```html
<a>、<br>、<font>、<img>、<select>、<span>、<textarea>など
```

# 確かめてみよう

ブロックボックスは、上から下へ(改行されて)配置され、<br />インラインボックスは、左から右へ配置されていくのが下記ソースで確認できます。
また、全てのdivタグのdisplayプロパティに`inline`を指定し、pタグとの見た目を確認してみてください。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div1 {
        background-color: greenyellow;
      }
      #div2 {
        background-color: khaki;
      }
      #div3 {
        background-color: lightblue;
      }
      #span1 {
        background-color: lightpink;
      }
      #span2 {
        background-color: lightyellow;
      }
      #span3 {
        background-color: mediumslateblue;
      }
    </style>
  </head>
  <body>
    <div id="div1" class="box">----- ↓↓↓↓↓ブロックボックス -----</div>
    <div id="div2" class="box">ボックスモデル</div>
    <div id="div3" class="box">----- ↑↑↑↑↑ -----</div>
    <span id="span1" class="inline">----- ↓↓↓↓↓インラインボックス -----</span>
    <span id="span2" class="inline">インラインボックス</span>
    <span id="span3" class="inline">----- ↑↑↑↑↑ -----</span>
  </body>
</html>
```

[ここにdivタグにdiplay: inlineを指定している説明があります。](https://www.yoheim.net/blog.php?q=20120802)


ブロックボックス、インラインボックスそれぞれに
幅（width）や高さ（height）、上下左右の margin 、paddingを指定し表示を確認してみてください。
(上記ソースの各要素にheight,width,pading,marginを指定しました。)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 1rem;
        padding: 1rem;
        border: solid;
        border-width: 0.5rem;
        border-color: black;
      }
      .inline {
        margin: 1rem;
        padding: 1rem;
        border: solid;
        border-width: 0.5rem;
        border-color: black;
      }
      #div1 {
        background-color: greenyellow;
        width: 200px;
        height: 50px;
      }
      #div2 {
        background-color: khaki;
        width: 50px;
        height: 200px;
      }
      #div3 {
        background-color: lightblue;
        width: 200px;
        height: 200px;
      }
      #span1 {
        background-color: lightpink;
        width: 200px;
        height: 50px;
      }
      #span2 {
        background-color: lightyellow;
        width: 50px;
        height: 200px;
      }
      #span3 {
        background-color: mediumslateblue;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="div1" class="box">----- ↓↓↓↓↓ブロックボックス -----</div>
    <div id="div2" class="box">ボックスモデル</div>
    <div id="div3" class="box">----- ↑↑↑↑↑ -----</div>
    <span id="span1" class="inline">----- ↓↓↓↓↓インラインボックス -----</span>
    <span id="span2" class="inline">インラインボックス</span>
    <span id="span3" class="inline">----- ↑↑↑↑↑ -----</span>
  </body>
</html>
```

# ５．paddingとmargin、marginの相殺

#### 5.1 paddingとmargin

下記ソースを元に、paddingとmariginの効いている箇所を確認してください。
また、Chromeデベロッパツールに表示されるボックスモデルの画像も確認しておいてください。

1. 指定方法には、padding(marigin)と纏めて書く方法とpadding-top(margin-top)のように個別に指定する方法があります。
2. padding(marigin)と纏めて書く方法では、topから時計回りに４つ指定します。
 2. １つ指定した場合は、top,right,bottom,leftすべてに同じ値が適用されます。
 2. ２つ指定した場合は、topとbottomに１つ目の値、rightとleftに２つ目の値が適用されます。
 2. ３つ指定した場合は、XXXXXXXXXX。下のソースで確認してみてください。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #a {
        padding: 10px;
        margin: 50px;
        background-color: chartreuse;
      }
      #b {
        padding: 12px 13px;
        margin: 14px 15px;
        background-color: coral;
      }
      #c {
        padding: 16px 17px 18px;
        margin: 19px 20px 21px;
        background-color: darkmagenta;
      }
      #d {
        padding-top: 22px;
        padding-right: 23px;
        padding-bottom: 24px;
        padding-left: 25px;
        margin-top: 22px;
        margin-right: 23px;
        margin-bottom: 24px;
        margin-left: 25px;
        background-color: hotpink;
      }
    </style>
  </head>
  <body>
    <div id="a">あいうえお</div>
    <div id="b">かきくけこ</div>
    <div id="c">さしすせそ</div>
    <div id="d">たちつてと</div>
  </body>
</html>
```

#### 5.2 marginの相殺

<font color="red">結論から言うと、重なったmarginは大きい方が採用されます。</font>
上記例だと、id="a"のdivタグはmargin-bottom: 50px、id="b"のdivタグのmargin-top: 14pxとなっており、id="a"とid="b"間のmarginは50pxになります。

# ７．実際のwidth,height

ここまで確認してきたソース、ボックスモデル画像の内容を確認すると実際の幅と高さには、borderやpaddingの大きさも含まれていることが分かります。
ですので、cssで指定した幅、高さはborderやpaddingの分見た目は大きくなります。

下記ソースで確認してみましょう。
divタグの幅は100pxですが、paddingの指定により100px以上の大きさになっています。

```css
      #e {
        width: 100px;
        padding: 200px;
        background-color: skyblue;
      }
```

```html
    <div id="e">なにぬねの</div>
```

# box-sizing: border-box

<font color="red">borderもpaddingもwidthに含める</font>というCSS指定も可能です。

下記ソースで確認してみてください。
width: 200pxとしています。
padding: 20pxは200px内に含められていることが分かります。

chromeデベロッパツールのボックスモデルでも確認してみてください。

```css
      #e {
        width: 200px;
        padding: 20px;
        background-color: skyblue;
        box-sizing: border-box;
      }
```

```html
    <div id="e">なにぬねの</div>
```