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，所以呈現為同一行的結果。

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

延伸閱讀相關外部連結
© Copyright webtech.tw Since 2010