最常見的「行內元素」(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>