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> 標籤屬性改為區塊,就自動換行囉!

Post a Comment

0 Comments