行內元素 inline element 和區塊元素 block element
的差別

最常見的「行內元素」(inline element) 是 <span> ，而相對於行內元素就是「區塊元素」(block element)，像是<div> 就是最常見的區塊元素。

行內元素 inline element

一般來說行內元素不會自動換行，行內元素也不像<div>標籤一樣會撐滿整個頁面的寬度。同一行可以有很多段行內元素，一般來說<span>較常用來特別設定一段文字裡面的少數幾個字的屬性，比如說這一段的某幾個字要設定背景色。

行內元素可以被包含在區塊元素裡面，但是區塊元素不能被包含在行內元素裡。

行內元素可以設定內距(padding)，但是在設定邊緣(margin)時，只會作用在左右兩側的空間，無法影響上下邊緣距離。

▼行內元素不會佔據整個頁面的寬度，paddin 可以正常影響四周的內距，但是 margin 只在左右邊作用。
<span>span是行內元素</span>

行內元素可以宣告為 inline-block

display: inline-block;

當行內元素宣告為 inline-block 時，上方提及的 margin 問題，也會獲得解決，margin 屬性會如同 padding 一樣可以作用在四個方向的邊緣。

其他的行內元素標籤如：

區塊元素如果沒有特別設定屬性，預設一定是從新的一行開始，而且會佔據整個頁面的寬度。區塊元素可以是單行也可以是多行，預設裡面的內容遇到右側邊界會自動換行。

區塊元素預設會佔據整個頁面的寬度

<div>我是區塊元素</div>

其他的區塊標簽如：