內聯元素：也稱為行內元素，當多個行內元素連續排列時，他們會顯示在一行里面。
內聯元素的特性：本身是無法設置寬度和高度屬性的，但是可以通過CSS樣式來控制，達到我們想要的寬度和高度。
span舉例1：
1. span元素屬於內聯元素，當我們直接設置了寬度和高度的時候代碼及顯示的結果如下:
...
<style type="text/css"> span{border:1px solid blue;width:200px;height:200px;} </style> ... <span>我是內聯元素</span>
雖然定義了寬度和高度，但是並沒有起作用。
2. 在樣式屬性中添加display:block。
<style type="text/css"> span{border:1px solid blue;width:200px;height:200px;display:block;} </style>
這時候可以看到長度和寬度起作用了。
span舉例2：
1. 定義2個並排的span元素，並定義樣式display屬性設置為block,分別顯示如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ font-size:12px; text-align: center; line-height:20px; margin-left:5px; border:1px solid red; background-color:red; color:white; width:100px; height:20px; display:block; } </style> </head> <body> <span>放大</span><span>縮小</span> </body> </html>
當定義display:block的時候，表示的span的屬性變成一個行級塊元素，所以這時候顯示在兩行中。
2.修改display的屬性，display:inline-block;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ font-size:12px; text-align: center; line-height:20px; margin-left:5px; border:1px solid red; background-color:red; color:white; width:100px; height:20px; display:inline-block; } </style> </head> <body> <span>放大</span><span>縮小</span> </body> </html>
這樣可以就可以將span元素放到一行，並且可以使用css來自定義元素的大小樣式了。
inline-block: 既有inline的同行特性，又有block的寬度和高度特性。