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

インライン要素とブロック要素の違いを整理しました。

# インライン要素,ブロック要素とは

* **インライン要素**
  …文章の一部として扱う要素。要素の前後で改行されない。

　（例）
　　`<a>`リンクを表す
　　`<span>`特定の部分にスタイルを適用する場合に利用する



* **ブロック要素**
 …行全体をまとまりとして扱う要素。要素の前後に改行される。

　（例）
　　`<h1~6>`見出しを表す
　　`<div>`スタイル適用やグループ分けのために利用する
　　`<p>`段落を表す
　　`<table>`テーブルを表す


# 違いを比較

### ①要素の配置
インライン要素、ブロック要素をそれぞれ2つずつ横並びで記載してみる。
※結果を見やすくするため、別途CSSで背景色を設定

   ```index.html
<span>インライン要素1</span> <span>インライン要素2</span>
<div>ブロック要素1</div> <div>ブロック要素2</div>
```


**【結果】**
インライン要素は横一列に並ぶが、ブロック要素は横に並ばず改行して表示される。
![20230823_qiita用①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524073/b5a58535-efd4-33f2-59e2-735be63c5d9a.png)





### ②width/heightの指定
インライン要素、ブロック要素それぞれに"width:400px; height:100px;"を指定してみる。
※結果を見やすくするため、別途CSSで背景色と1pxのborderを設定
```index.html
<span>インライン要素(width/height指定なし）</span>
<span style="width:400px; height:100px;">インライン要素(width/height指定あり)</span>

<div style>ブロック要素(width/height指定なし)</div>
<div style="width:400px; height:100px;">ブロック要素(width/height指定あり)</div>
```
**【結果】**
インライン要素にはwhidth,heightが適用されない。
ブロック要素にはwidth,heightの適用がされる。
![20230824_qiita用②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524073/2cdc4b80-87d1-c176-40da-23382076bb17.png)




### ③margin/paddingの指定
インライン要素、ブロック要素それぞれに"margin:50px; padding:50px;"を指定してみる。
※結果を見やすくするため、別途CSSで背景色と1pxのborderを設定
```index.html
<p>結果を分かりやすくするため、ダミーのテキストを追加</p>

<span>インライン要素(margin/padding指定なし）</span>
<span style="margin:50px; padding:50px;">インライン要素(margin/padding指定あり）</span>

<div style>ブロック要素(margin/padding指定なし）</div>
<div style="margin:50px; padding:50px;">ブロック要素(margin/padding指定あり）</div>
```
**【結果】**
インライン要素、ブロック要素共に余白ができたことは分かるが、インライン要素とブロック要素で結果に差がありそう。
![20230824_qiita用③_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524073/2ab9a595-ae01-3b36-a8ba-dc9cb3e42823.png)



インライン要素の結果を詳細に確認すると、margin（下図のオレンジ部分）は**水平方向のみ**適用されており、padding（下図の緑部分）は想定通り適用されているが、周りの要素と重なってしまっている。
![20230824_qiita用③_インライン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524073/28d0006c-e040-2079-9a1a-5f5ab8ba01a2.png)

一方ブロック要素はmargin（下図オレンジ部分）、padding（下図緑部分）共に想定通り適用されている。
![20230824_qiita用③_ブロック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524073/b6f573d2-9a13-c08b-56a5-532acf9de5a2.png)

:::note info
ポイント
・インライン要素はmarginの指定が水平方向のみ可能
・インライン要素のpaddingは周りの要素と重なってしまう
:::

# inline-blockとは

「インライン要素にwidthを設定したい」「ブロック要素を横に並べたい」といった場合に便利な**inline-block**。
inline-blockはインライン要素のようにふるまうがwidth、height、margin、paddingが指定できる。


### width/height、margin/paddingの指定を確認
inline-blockを指定しない要素を1つ、inline-blockを指定した要素2つをインライン要素とブロック要素それぞれで用意。


```index.html
<p>結果を分かりやすくするため、ダミーのテキストを追加</p>

<span style="widht:400px; height:80px; margin:10px; padding:10px;">
 インライン要素(inline-block指定なし）
</span>
<span style="widht:400px; height:80px; margin:10px; padding:10px; display:inline-block;">
 インライン要素(inline-block指定あり）
</span>
<span style="widht:400px; height:80px; margin:10px; padding:10px; display:inline-block;">
インライン要素(inline-block指定あり）
</span>

<div style="widht:400px; height:80px; margin:10px; padding:10px;">
 ブロック要素(inline-block指定なし）
</div>
<div style="widht:400px; height:80px; margin:10px; padding:10px; display:inline-block;">
 ブロック要素(inline-block指定あり）
</div>
<div style="widht:400px; height:80px; margin:10px; padding:10px; display:inline-block;">
 ブロック要素(inline-block指定あり）
</div>
```
**【結果】**
![20230825_qiita用④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524073/821f1556-c3a1-d8c9-7b97-db3a7a7c4121.png)
inline-blockを使うことで、以下ができるようになった。
 ＜インライン要素＞
    ・width/hightの指定
    ・垂直方向のmarginの指定
    ・paddingを他の要素と被らないように指定

 ＜ブロック要素＞
    ・要素を横に並べる





## まとめ
要素を思い通りの配置にするためには、inline、block、inline-blockの特性を理解することが重要。

<table>
<thred>
 <tr>
  <th></th><th>改行</th><th>width</th><th>height</th><th>margin</th><th>padding</th>
 </tr>
</thred>
 <tr>
  <td>inline</td><td>なし</td><td>×</td><td>×</td><td>△（水平方向のみ）</td><td>〇 ※他の要素と重なる</td>
 </tr>
 <tr>
  <td>block</td><td>あり</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td>
 </tr>
 <tr>
  <td>inline-brock</td><td>なし</td><td>〇</td><td>〇</td><td>〇</td><td>

〇</td>
 </tr>