塊級元素和行內元素是布局中常見的兩種基本元素，但是未必有很多人深入的研究它們的細微差別。
常見塊級元素：div p form ul ol li 等；
常見的行內元素：span stronh em;
它們的區別主要有以下幾點：
1.塊級元素獨自占一行且寬度會占滿父元素寬度，行內元素不會獨占一行，相鄰行內元素可以排在同一行。
如圖：
<head> <meta charset="UTF-8"> <title>測試</title> <style type="text/css"> </style> </head> <body> <p>塊級元素一</p> <p>塊級元素二</p> <span>行內元素一</span> <span>行內元素二</span> </body>
2.塊級元素可以設置weith和height，行內元素設置width和height無效，而且塊級元素即使設置寬度也還是獨占一行。
如圖：
<head> <meta charset="UTF-8"> <title>測試</title> <style type="text/css"> p{background-color: red;height: 50px;width: 50%;} div{background-color: green;height: 50px;width: 40%;} span{background-color: gray;height: 70px;} strong{background-color: blue;height: 70px;} </style> </head> <body> <p>塊級元素一</p> <div>塊級元素二</div> <span>行內元素一</span> <strong>行內元素二</strong> </body>
3.塊級元素可以設置margin和padding屬性，行內元素水平方向的margin和padding如margin-left、padding-right可以產生邊距效果，但是豎直方向的如padding-top和margin-bottom不會產生邊距效果
<head> <meta charset="UTF-8"> <title>測試</title> <style type="text/css"> p{background-color: red;height: 50px;width: 50%;padding: 20px;margin: 20px;} div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;} span{background-color: gray;height: 70px;padding: 40px;margin: 20px;} strong{background-color: blue;height: 70px;padding: 40px;margin: 20px;} </style> </head> <body> <p>塊級元素一</p> <div>塊級元素二</div> <span>行內元素一</span> <strong>行內元素二</strong> </body>
4.最后是塊級元素和行內元素的相關屬性：display
其中塊級元素對應display：block，行內元素對應display：inline。可以通過修改元素的display屬性來切換行內元素和塊級元素。
如圖：
補充說明一個屬性：display：inline-block；可以讓元素具有塊級元素和行內元素的特性：既可以設置長寬，可以讓padding和margin生效，又可以和其他行內元素並排。是一個很實用的屬性