一、背景
初學html，接觸很多標簽<h1>、<p>、<span>、<ul>、<em>等，當寫出簡單的小頁面的時候，例如僅僅是一篇帶有標題的文章，標題<h1>標簽單獨一行，不管后面有多大的空間；<p>標簽中使用多個<em>給某些詞做強調，但是<em>卻和<p>中的其他內容同一行，由此，會思考為什么<em>和<h1>會有這種的不同？
二、標簽的類型（顯示模式）
想要知道為何不同，得先了解HTML標簽的類型。
HTML標簽一般分為塊標簽和行內標簽兩種類型，也可以稱為塊元素和行內元素。
上面舉例中的<h1>標簽就是典型的塊元素，<em>標簽就是一個行內元素。塊元素和行內元素的具體特點如下：
三、塊級元素（block-level）
塊元素會獨自占據一整行，或者多行，可以任意設置其大小尺寸，是用於搭建網頁布局的必須部分，使網頁結構更加緊湊合理。
塊級元素有以下幾個特點：
- 總是另起一行（特立獨行）
- 可以設置其寬度、高度，內外邊距
- 在不手動設置寬度的情況下，寬度默認為所在容器的100%（即容器寬度）
- 可以容納行內元素和其他塊元素。
常見的塊級元素有：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的塊級元素。
特殊：文字類的塊級元素不能放塊元素，例如<p>/<h1>~<h6>/<dt>
/*塊元素div*/
div{
width: 200px; /*寬高、外邊距、內邊距 都有效*/
height: 30px;
border:1px solid blue;
margin:20px;
/* padding:10px;*/ /*此處內邊距會引起div寬高的變化，為了比較更直觀就注釋了*/
line-height: 30px;
}
使用以上樣式給下面塊元素div設置
<div>我是塊元素2</div>
<div>我是塊元素2</div>
效果圖見文末。
四、行內元素（inline-level）
行內元素也稱為內聯元素，行內元素不占有獨立區域，其大小僅僅被動的依賴於自身內容的大小（例如文字和圖片），所以一般不能隨意設置其寬高、對齊等屬性。常用於控制頁面中文本的樣式。
行內元素的特點：
- 總是和相鄰的行內元素在同一行上（物以類聚）
- 設置寬高無效，水平方向的padding和margin屬性可以設置，但是垂直方向上的無效。
- 默認寬度是他自身內容的寬度。
- 行內元素只能容納其他行內元素或者文本。
特殊：a比較特殊，可以放塊級元素，但是鏈接里面不能再放鏈接。
/*行內元素span*/
span{
width:200px; /*寬度設置無效*/
height: 100px; /*高度也無效*/
border:1px solid red;
}
下面是Html樣式
<span>行內元素1</span>
<span>行內元素2</span>
<span>行內元素3</span>
<span>我是行內元素行內元素行內元素4</span>
效果圖見文末
五、行內塊元素（inline-block）
普遍的規則里總有那么幾個不一樣的，在行內元素中就有那么幾個特殊標簽，比如<img>/<input>/<td>,可以給他們設置寬高、對齊屬性，我們把這樣特殊的一類標簽稱為行內塊元素。行內塊元素綜合了塊元素和行內元素的不同特點。
行內塊元素的特點：
- 和相鄰行內元素在同一行，但是之間會有空白縫隙。
- 默認寬度是他本身內容的寬度。
- 寬度、高度、行高、外邊距以及內邊距都可以手動設置。
樣式：
/*行內塊元素input*/
input{
width: 200px; /*寬高均有效*/
height: 30px;
}
結構：
<input type="text" value="行內塊元素1">
<input type="text" value="行內塊元素行內塊元素2行內塊元素">
綜合效果圖如下：
六、標簽顯示模式轉換（display）
既然標簽有不同的顯示模式，就會有相應的轉換辦法以應對各種需要。
display正是我們想要的。
塊元素——>行內元素 ： display:inline;
行內元素——>塊： display:block;
塊、行內元素——>行內塊： display: inline-block;
總結
總結完他們之間的特點更加清晰，記得更牢，首先在以后遇到當給一個元素設置的寬高無效的時候這就是一個原因，使用display即可解決。