今天主要對inline元素做一下歸納總結。
inline是display中的默認屬性值，就是將元素設置為內聯元素，設置完后元素前后都沒有換行符，因此內聯元素與前后的元素在一行上。
關於內聯元素的特點歸納如下：
1、內聯元素中只能容納其他內聯元素或文本。內聯元素的高度和寬度由元素中的內容所決定：當元素中存在文本時，其高度由文本的字體大小所決定，寬度由文本內容的長短決定。
當然，關於高度，行高line-height也可以設置內聯元素的高度。
除此之外，如果僅僅對內聯元素設置高度height和width，是不起作用的。
代碼如下：
<head>
<style> div{ width: 100px; height: 100px; background-color: red; border: 1px solid black; display:inline; } </style> </head> <body> <div>12345</div> </body>
最終在界面上顯示的效果如下圖1所示：
圖1
上述代碼中可以看到，我們對div設置了寬度width和高度height，但其呈現在界面上的寬度最終由內容長度決定，高度由其內部的內容“123”決定。
如果對line-height進行更改：
<head>
<style> div{ width: 100px; height: 100px; background-color: red; line-height: 50px; border: 1px solid black; display:inline; } </style> </head> <body> <div>12345</div> </body>
那么加入line-height后的效果如下圖2所示：
圖2
由div距離頁面頂部的空白可以看出，內聯元素div的高度的確更改了。
2、margin對於內聯元素的影響應分為替換元素（replaced element）和非替換元素（non-replaced element）來討論。
在HTML中，替換元素：作為其他內容占位符的一個元素，比如img和input；
非替換元素：內容包含在文檔中的元素，比如div等，內容都放在本身之中。
1）左右外邊距margin-left和margin-right不管是否為替換元素，都是有效的；
2）對於行內非替換元素（例如div）來說，margin不會改變其行高line-height。因此，margin不能改變內聯元素的margin-top和margin-bottom：
代碼如下：
<head>
<style> #div1{ background-color: red; border: 1px solid black; display: inline; margin: 100px; } #div2{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div id="div1">12345</div> <div id="div2"></div> </body>
設置margin后在頁面上的展示效果如下圖3所示：
圖3
由上圖可以看到，margin-left已經起到作用，以下方長寬皆為100px的正方形div為參照物，內聯元素div1距離左邊距為100px，但是上下的外邊距均未發生改變。
3）對於行內替換元素來說，由於margin外邊距可以改變其行高line-height，所以margin-top和margin-bottom都有效。此處就不做代碼演示了，大家可以使用input或者img元素測試一下。
3、padding對於內聯元素的影響也應分為替換元素和非替換元素來討論。
1）左右內邊距padding-left和padding-right，不管元素是否為替換元素，都是有效的；
2）對於非替換元素（例如div）來講，上下內邊距padding-top和padding-bottom是有效可見的，但是需要注意，上下內邊距的值不會改變元素的line-height，也就是說，如果該元素外部還有一個父級，padding-top和padding-bottom的增減是可見的，但是不會撐大父級div。
代碼如下：
加入內邊距padding之前：
<style> #div1{ background-color: red; border: 1px solid black; display: inline; } div{ width: 200px; height: 200px; background-color: green; border: 1px solid black; } </style> <body> <div></div> <div> <div id="div1">12345</div> </div> <div></div> </body>
其效果如下圖4所示：
圖4
如果在上述代碼塊中，在div1的樣式中插入：padding:60px; 則效果變成如下圖5：
圖5
通過上圖5可以看到，padding值是可見的，上下左右均增加了60px，但是並沒有撐大父級div的大小。
3）對於替換元素來講，上下內邊距padding-top和padding-bottom是有效可見的，且會撐大父級，此處就不做代碼演示了。（在父級沒有設置樣式的情況下。如果父級元素指定了寬和高，那么無論如果都不會撐大父級元素）