# HTML - 區塊元素(block element) vs 行內元素(inline element)

###### tags: `CSS`, `block`, `inline`

## Block elements vs. Inline elements

### 區塊元素 block element

`display: block`

- 盡可能佔滿整個版面（依照父元素的寬度）
- 可以設定寬、高：應避免寫死高度，實際高度應由裡面元素的高度推擠而來
- 另起一行呈現

##### 常見的區塊元素標籤：
- `<div>`：沒有語意，單純拿來排版的標籤
- `<p>`：
- 文字內容不是以文字大小來推出高度，而是以行距 `line-height` 來呈現高度
- 不寫 `line-height` 時就是 1 倍
- `<h1>`
- `<ul> <li>`


### 行內元素 inline element
`display: inline`
- 比較常用在段落 `<p>` 裡面
- 沒辦法設定寬、高
- 如果要設定寬、高，就改成區塊元素： css 改成 `display: block`
- 不會換行


#### 常見的行內元素標籤：
- `<span>`：本身沒有任何語意，屬於排版用的 inline 標籤，用於點綴樣式，通常用來設定一段文字裡面某幾個字的特殊樣式。例如： 我想讓<span style="color: green">這幾個字</span>變成綠色。
- `<b>`、`<strong>`：用於粗體字。
- `<b>` 取自 bold ，不帶語意，單純讓字體呈現粗體樣式。（通常不建議使用，若單純想要粗體字可以設定 CSS 樣式）
- `<strong>` 則帶有語意，用粗體字來強調一段內容特別重要。
- `<i>`、`<em>`：用於斜體字。
- `<i>` 取自 italic 不帶語意，單純讓字體呈現斜體樣式。
- `<em>` 取自 emphasize，則帶有語意，用斜體字來強調一段內容特別重要。
- `<input>` 、 `<textarea>` 、`<select>`
- `<img>`
- `<a>`

:::info
實務上常將 `<a>` 改成 `display:block` ，方便點擊
:::

### img

圖片都預設會有 3px 的距離（Ref: [css - HTML 5 strange img always adds 3px margin at bottom - Stack Overflow](https://stackoverflow.com/questions/10844205/html-5-strange-img-always-adds-3px-margin-at-bottom)）

#### 清除圖片下方的多餘空白
可以使用 `vertical-allign` 或 `display:block;` 來清除圖片下方的多餘空白

img {
    vertical-allign: middle;
}

/* OR */

img {
    display: block;
}