[轉貼自]http://www.webtech.tw/info.php?tid=37
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，所以呈現為同一行的結果。
用法很簡單吧！接著建議實做看看，先從我們的範例程式碼開始，相信很快就可以抓到感覺囉！
全站熱搜
留言列表
