| 行內元素以及塊級元素的區別 | |||
| inline行內元素（內聯元素）⑤ |
block塊級元素⑥ | inline-block行內塊元素 | |
| 不換行，和其他內聯元素共行 | 總是從新行開始 | 不獨占一行的塊級元素， 在某種程度上可實現與浮動的相似的效果， 但是inline-block占據文檔流， 所以不會產生父容器坍塌問題， 而產生的縫隙問題，使用張鑫旭的博客
|
|
| 可替換元素① | 可以設置元素的高度與寬度 可設置margin和padding任意方向，幾乎所有的可替換元素都是行內元素 如<img>、<input>、<textrarea>、<select>、<object>這些空元素 |
默認寬度是父容器寬度的100%，可以設置高與寬， 可以設置margin和padding任意方向 |
|
| 非替換元素② | 寬度只與內容有關，不可設置高度與寬度，而是用line-height來控制高度, padding左右起作用，上下不會影響行高③， margin左右作用起作用，上下不起作用④， 例如<a>、<span>等 |
||
| 只能容納文本或其他內聯元素 | 能容納其他塊狀元素或者內聯元素 | ||
備注：（以下內容引自mabel_on_line）
①可替換元素：
就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
例如：瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息並顯示出來，而如果查看(X)HTML代碼，則看不到圖片的實際內容；
又例如：根據<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。
這些元素往往沒有實際的內容，即是一個空元素， 瀏覽器會根據元素的標簽類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。
②非替換元素：(X)HTML 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。
段落<p>是一個不可替換元素，文字“段落的內容”全被顯示。
③padding左右起作用，上下不會影響行高，
但是對於有背景色和內邊距的行內非替換元素，背景可以向元素上下延伸，但是行高沒有改變。
因此視覺效果就是與前面的行重疊。(《css權威指南》 P249)
④margin左右作用起作用，上下不起作用，
原因在於：行內非替換元素的外邊距不會改變一個元素的行高（《css權威指南》 P227）。
⑤行內元素（內聯元素）：行內元素不形成新內容塊，即在其左右可以有其他元素，
例如：<a>、<span>、<strong>等，都是典型的行內級元素。
display屬性等於“inline”的元素都是行內元素。幾乎所有的可替換元素都是行內元素，例如<img>、<input>等等。
⑥塊級元素：最明顯的特征就是它默認在橫向充滿其父元素的內容區域，而且在其左右兩邊沒有其他元素，即塊級元素默認是獨占一行的
典型的塊級元素有：<div>、<p>、<h1>到<h6>，等等。
通過CSS設定了浮動（float屬性，可向左浮動或向右浮動的）以及設定顯示（display）屬性為“block”或“list-item”的元素都是塊級元素。
★ 但是浮動元素比較特殊，由於浮動，其旁邊可能會有其他元素的存在。
例如：“list-item”（列表項<li>），會在其前面生成圓點符號，或者數字序號。