CSS display block 屬性與用法

CSS display block 規定元素以區塊方式呈現，相較於 display inline 的同一行呈現恰恰相反，當一個元素如多張圖片或多段文字的屬性設定為區塊（display:block）則這些元素將會在網頁上呈現自動換行的效果，除非你設定了其它的屬性，例如 float 或是 position 等。

CSS display block 語法範例

<span style= "display:block">元素一</span> <span style= "display:block">元素二</span>

呈現結果

元素一
元素二

範例中我們用了兩組 <span></span> 標籤，為什麼要用 <span> 標籤而不是使用 <div> 標籤呢？因為 <div> 標籤的屬性本身就是區塊，不用設定 display:block 就會自動換行，所以範例中我們採用 <span> 標籤，而 <span> 本身不會自動換行，但是透過加入 display:block 的語法，讓這兩組 <span> 標籤屬性改為區塊，就自動換行囉！