---
# System prepended metadata

title: HTML區塊元素 & 行內元素
tags: [HTML, 前端]

---

# HTML區塊元素 & 行內元素

###### tags: `HTML` `前端`

![](https://i.imgur.com/FfpB4sI.png)

在這個範例當中，我將每種標籤都加了不同的背景色，可以看出有的填滿了一整行、有的只佔了部分空間，這就是 **區塊元素** 與 **行內元素** 的不同。

區塊元素的特性：
* 盡可能佔滿版面、適應父元素寬度
* 會另起一行來進行呈現，即使更改寬度

行內元素的特性：
*    比較常用在段落裡面
*    無法直接設定寬高
*    margin-top, margin-bottom 不起作用

## div & span

不同於其他 HTML 標籤，這兩個標籤沒有「語意」，是單純用於排版的標籤。
從上圖可以看出，div 屬於區塊元素； span 屬於行內元素。