點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
塊級元素和行內元素是佈局最基本的兩種元素，常見的塊級元素有div、p、form、ul、ol、li等，常見的行內元素有span，strong， em等。
那麼，今天，我來捋一捋它們之間一些顯著的不同之處。
一、佔行不一樣
上面這些元素，為了區分各自的大小， 我給它們分別設置了不同的背景顏色。
由上可知，塊級元素會獨佔一行，默認情況下，其寬度自動填滿其父元素寬度，行內元素不獨佔一行，相鄰行內元素會排列在同一行裡，直到一行排不下，才會換行，其寬度 隨元素的內容而變化 。
二、寬高屬性效果不一樣
塊級元素可以設置width，height屬性，行內元素設置width，height屬性無效。
我給每一個元素都設置寬高屬性。
行內元素不起作用。需要注意的一點是：塊級元素即使設置了寬度，仍然是獨佔一行的。
三、邊矩效果有所不同
我給每個元素加一個margin和padding值。（margin:20px;padding:20px;）
行明顯的注意到，塊級元素可以設置margin、padding。但行內元素很奇怪。水平方向margin、padding都產生了邊矩效果，但豎直方向的padding，margin卻不產生邊矩效果。
也就是說，豎直方向的margin看不到任何效果，豎直方向的padding雖然增大了行內元素的面積，但並沒有和相鄰元素的拉開距離。
四、切換
改變diplay屬性可以在塊級元素和行內元素之間切換。
總結一下：
以上就是行內元素和塊級元素之間的顯著區別。簡單總結了一下，也很重要。
分享到:
閱讀更多 小鄭搞碼事 的文章
