一、行內元素和塊級元素的區別
1、 行內元素不會佔據整行，在一條直線上排列，都是同一行，水平方向排列；
塊級元素會佔據一行，垂直方向排列。
2、 塊級元素可以包含行內元素和塊級元素；行內元素不能包含塊級元素。
3、 行內元素與塊級元素屬性的不同，主要是盒模型屬性上，行內元素設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
二、行內元素和塊級元素的相互轉換
行內元素轉化為塊元素： display:block;
塊元素轉化為行內元素： display:inline;
三、問題延伸
問題描述：為何img、input等行內元素可以設定寬、高？
詳細解答：
元素是文件結構的基礎，在css中，每個元素生成了乙個包含了元素內容的框（box，也譯為「盒子」）。但是不同的元素顯示的方式會有所不同，例如和
就不同，而和也不一樣。在文件型別定義（dtd）中對不同的元素規定了不同的型別，這也是dtd對文件之所以重要的原因之一。
1. 替換和不可替換元素
從元素本身的特點來講，可以分為替換和不可替換元素。
a) 替換元素
替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
例如瀏覽器會根據
標籤的src屬性的值來讀取資訊並顯示出來，而如果檢視(x)html**，則看不到的實際內容；又例如根據標籤的type屬性來
決定是顯示輸入框，還是單選按鈕等。
(x)html中的
、、、、都是替換元素。這些元素往往沒有實際的內容，即是乙個空元素，例如：
瀏覽器會根據元素的標籤型別和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。
b) 不可替換元素
(x)html 的大多數元素是不可替換元素，即其內容直接表現給使用者端（例如瀏覽器）。例如：
段落的內容
段落是乙個不可替換元素，文字「段落的內容」全被顯示。
2. 顯示元素
除了可替換元素和不可替換元素的分類方式外，css 2.1中元素還有另外的分類方式：塊級元素（block-level）和行內元素（inline-level，也譯作「內聯」元素）。
a) 塊級元素
在視覺上被格式化為塊的元素，最明顯的特徵就是它預設在橫向充滿其父元素的內容區域，而且在其左右兩邊沒有其他元素，即塊級元素預設是獨佔一行的。
典型的塊級元素有：、、到，等等。
通過css設定了浮動（float屬性，可向左浮動或向右浮動）以及設定顯示（display）屬性為「block」或「list-item」的元素都是塊級元素。
但是浮動元素比較特殊，由於浮動，其旁邊可能會有其他元素的存在。而「list-item」（列表項），會在其前面生成圓點符號，或者數字序號。
b) 行內元素
行內元素不形成新內容塊，即在其左右可以有其他元素，例如、、等，都是典型的行內級元素。
display屬性等於「inline」的元素都是行內元素。幾乎所有的可替換元素都是行內元素，例如
、等等。
不過元素的型別也不是固定的，通過設定css 的display屬性，可以使行內元素變為塊級元素，也可以讓塊級元素變為行內元素。
3. 結論：
替換元素一般有內在尺寸，所以具有width和height，可以設定。例如你不指定img的width和height時，就按其內在尺寸顯示，也就是被儲存的時候的寬度和高度。
對於表單元素，瀏覽器也有預設的樣式，包括寬度和高度。
姿勢引用原文：1.行內元素與塊級元素比較全面的區別和轉換
2.為何img、input等內聯元素可以設定寬、高
塊級元素和行內元素區別 以及行內塊元素
塊級元素的特點 1 寬度預設是容器的100 2 高度，行高 外邊距以及內邊距都可以控制。3 總是從新行開始 4 可以容納內聯元素和其他塊元素。行內元素的特點 1 預設寬度就是它本身內容的寬度。2 高 寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。3 和相鄰行內元素在一行上...
行內元素 塊級元素和行內塊級元素
而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...
行內元素和塊級元素區別
引言 一次偶然的面試遇到的題目，雖然當時知道塊級元素和行內元素的區別，但是沒有仔細去想。一 行內元素與塊級元素 塊級元素列表 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義...