WESEEK Tips wiki

{{pagename}} - {{sitename}}

kaori-t

# ブロックレベル要素とインライン要素

HTMLde定義されている要素のうち、`<body>` ~ `</body>`の中でしようされる要素の多くは、ブロックレベル要素 (Block-Level Elements)もしくはインライン要素 (Inline Elements) に分類される。



## ブロックレベル要素 (Block-Level Elements)
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識される。 ブラウザでの表示も一つのかたまりとして扱われることが多く、**一般的なブラウザでは前後に改行が入る**
- 改行と並び
    - ブロック要素の前後には改行が入る
- 幅・高さの指定
    - 幅と高さが指定できる
- 余白の指定
    - 上下左右のmarhginとpaddingを自由に指定できる


**【代表的なブロックレベル要素】**
```
<div>, <h1> ~ <h6>, <p>, <ul>, <ol>, <li>, <table>, <form>, <hr>, <pre>, <blockquote>
```

## インライン要素 (Inline Elements)

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。 例えば、`<p>`要素の中の`<strong>`要素のように、段落のなかの一部を強調するような使われ方をする要素。 **一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。**  
    
**【代表的なインライン要素】**
```
<a>, <span>, <b>, <img>, <label>, <input>, <select>, <textarea>
```
- 改行と並び
    - 横に並ぶ
- 幅・高さの指定
    - 幅と高さは指定できない(文字の長さや大きさで決まる)
- 余白の指定
    - 左右のpaddingとmarginは指定できる
    - 上下のmarginは指定できない
    - 上下のpaddingを指定すると、前後の行と被ってしまう

【参考文献】
[【CSS】displayの使い方を総まとめ！inlineやblockの違いは？](https://saruwakakun.com/html-css/basic/display#section1)