許多人會搞不清楚 CSS 中的 display:block 與 display:inline 到底有什麼樣的差異
- display:block – 區塊，元素會以區塊方式呈現，除非設定 position 或 float。
- display:inline – 所有文字或圖片均不換行，也就是全部都會是同一行的意思。
block 的特性是可以設定高度 height、寬度 width、上方與下方距離，像是 div、 p、 ul、 li 均屬 block。而 inline 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度，像是 span、 a、 input、 img、 em 均屬 inline。
display:block 與 display:inline 實做範例
Example、display:block
1 2 | <div style= "display:block">元素一</div> <div style= "display:block">元素二</div> |
呈現結果
我們將兩個 display 均設為 block，所以成為區塊的呈現方式，強迫換成兩行。
Example、display:inline
1 2 | <div style="display: inline;">元素一</div> <div style="display: inline;">元素二</div> |
呈現結果
因為兩個 div 元素均設為 display:inline，所以呈現為同一行的結果。
資料來源：WEBTECH 網頁設計教學站