ブロック要素とインライン要素の幅の違い

#htmlの要素にはブロック要素とインライン要素にはデフォルトでの横の幅に違いがある。

## ブロック要素とは
ヘッダーやフッター、サイドバーやフォームなど、サイトを構成する大まかな枠組みになる要素。デフォルトの幅がサイトの幅いっぱいになるから連続して追加すると縦に繋がる。
よく使う要素として、
div,h1~h6,p,ul,ol,li,formが挙げられる。

## インライン要素とは
主に文章やフォーム内のボタンなど、ブロック要素内に記述される事が多い要素。
要素の幅が文字数の長さによって変わるので、連続して追加すると横に並ぶ。
よく使う要素として、
a,input,spanが挙げられる。

## 要素の幅を調べてみる
ブラウザのインスペクタ(ブラウザ上でctrl + shift + i で表示)で表示することもできるが、今回は見えやすくしたいので、cssで背景色をつけてみました。

```index.html
<!doctype>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>ブロック要素とインライン要素の幅の違いまとめ</title>
  </head>
  <body>
    div </br>
    <div>divタグ</div>
    h1 </br>
    <h1>h1タグ</h1>
    h2 </br>
    <h2>h2タグ</h2>
    h3 </br>
    <h3>h3タグ</h3>
    h4 </br>
    <h4>h4タグ</h4>
    h5 </br>
    <h5>h5タグ</h5>
    h6 </br>
    <h6>h6タグ</h6>
    p </br>
    <p>pタグ</p>
    ul </br>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
    ol </br>
    <ol>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ol>
    form </br>
    <form>
      <input type="text" placeholder="入力フォーム"/>
      <input type="radio" name="test" value="ラジオ１"/>ラジオ１
      <input type="radio" name="test" value="ラジオ２"/>ラジオ２
      <input type="submit" value="送信"/>
    </form> 
    a </br>
    <h1><a href="#">aタグ1</a><a href="#">aタグ2</a></h1>
    span </br>
    <h1><span>spanタグ1</span><span>spanタグ2</span></h1>
  </body>
</html>

```

```style.css
* {
  margin-top: 10px;
  margin-bottom: 10px;  
}

body {
  color: #222;
}
div {
  background-color: #222;
  color: #ccc;
}

h1,h2,h3,h4,h5,h6 {
  background-color: #444;
  color: #ccc;
}

p {
  background-color: #aaa;
  color: #222;
}

ul,ol {
  background-color: #111;
}

li {
  background-color: #555;
  color: #ccc;
}

form {
  background-color: #333;
}

input {
  background-color: #666;
  color: #ccc;
}

a {
  background-color: #aaa;
  color: #222;
  margin-left: 5px;
}

span {
  background-color: #aaa;
  color: #222;
  margin-left: 5px;
}
```
表示
![Screenshot from 2018-03-27 11-01-49.png](https://qiita-image-store.s3.amazonaws.com/0/245373/aaad7842-9b30-7837-ab66-9735edd32769.png)

## 備考
### インライン要素をブロック要素にするには
インライン要素に`display: block;`をつける。
普通は、インライン要素内にブロック要素を追加出来ないが、追加できるようになる。
### ブロック要素を横並びにする。
ブロック要素に`display: inline;`をつける。

```index2.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="style2.css"/>
  </head>
  <body>
    <div>
      <span>インラインspan</span>
      <span>インラインspan</span>
    </div>
    <div>
      <span class="block">ブロックspan</span>
      <span class="block">
        <p>ブロック要素となったspanにはブロック要素であるpタグを追加できる</p>
        <p>ブロック要素となったspanにはブロック要素であるpタグを追加できる</p>
      </span>
    </div>
    
    <div class="inline">
      インラインdiv
    </div>
    <div class="inline">
      インラインdiv
    </div>
  </body>
</html>
```

```style2.css
body {
  font-size: 18px;
}
div {
  background-color: #555;
  margin: 10px;
}

span {
  background-color: #999;
  margin: 5px;
}

.block {
  display: block;
}

.inline {
  display: inline;
}
```

表示
![Screenshot from 2018-03-27 11-31-44.png](https://qiita-image-store.s3.amazonaws.com/0/245373/7272cfee-f369-6477-d7ff-692adf225e2d.png)