WEBTECH 網頁設計教學站
CSS display 屬性用法介紹 display:block 與 display:inline
許多人會搞不清楚 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


開啟程式碼頁面

呈現結果



我們將兩個 display 均設為 block,所以成為區塊的呈現方式,強迫換成兩行。

Example、display:inline


開啟程式碼頁面

呈現結果



因為兩個 div 元素均設為 display:inline,所以呈現為同一行的結果。

用法很簡單吧!接著建議實做看看,先從我們的範例程式碼開始,相信很快就可以抓到感覺囉!

延伸閱讀相關外部連結

連絡我們