行內元素 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 一樣可以作用在四個方向的邊緣。

其他的行內元素標籤如:

  • <a>
  • <strong>
  • <em>
  • <img>

 

區塊元素 block element

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

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

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

其他的區塊標簽如:

  • <p>
  • <ol>,<ul>,<dl>,<il>
  • <h1><h2>….<h6>
  • <pre>
  • <blockquote>