行內元素和塊級元素的區(qū)別

常見的行內元素：span、strong、em

常見的塊級元素：div、p、form、ul、ol、li

1. 直觀區(qū)別

?行內元素

不會獨占一行，相鄰行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化。

塊級元素

獨占一行，默認情況下，其寬度自動填滿其父元素寬度。垂直方向排列，塊級元素從新行開始結束接著一個斷行

2. 屬性區(qū)別

行內元素

不能設置width、height；

垂直方向上padding-top、padding-bottom、margin-top、margin-bottom不產(chǎn)生效果；

水平方向上padding-left、padding-right、margin-left、margin-right產(chǎn)生效果

塊級元素：可以設置width、height、padding、margin。

3.對應display屬性

行內元素 ? ?

display：inline

display:block 變成塊級元素

塊級元素?

display: block;?

display:inline變成行內元素

4.包含關系

塊級元素可以包含行內元素，行內元素不能包含塊級元素。