塊級元素和行內元素的區別

	塊級元素	行內元素
常見元素	div、p、form、ul、ol、li	span、strong、em
特性	獨占一行，默認情況下，其寬度自動填滿其父元素寬度	不會獨占一行，相鄰行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化
width、height屬性	可以設置，設置了寬度還是獨占一行	無效
margin和padding屬性	可以設置	水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果， 但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。
對應的相關display屬性	block	inline
切換	display:inline變成行內元素	display:block變成塊級元素

原始狀態：

<style type="text/css">
    p{ background:red;}
    div{background:yellow;}
    span{ background:blue;color:white;}
    strong{background:green;color:white;}
</style>
<p>塊級元素 p </p><div>塊級元素 div </div><span>行內元素 span </span><strong>行內元素 strong </strong>

 

<style type="text/css">
    p{ background:red;display:inline;}
    div{background:yellow;display:inline;}
    span{ background:blue;display:block; color:white;}
    strong{background:green;display:block; color:white;}
</style>
<p>塊級元素 p </p><div>塊級元素 div </div><span>行內元素 span </span><strong>行內元素 strong </strong>