DIV 與 SPAN 的不同

原文轉錄：DIV 與 SPAN 標籤

HTML 中使用 CSS 來定義樣式、 版面配置, 近年又重新回到主流.

說到使用 CSS 來作為網頁版面配置, 就不得不介紹一下 DIV 這個 Tag(標籤). 除了 DIV Tag, 順便也介紹一下 SPAN 標籤.

在網路上搜尋到一個蠻清楚的定義， 可供參考如下，



The tag defines a division/section in a document.

Browsers usually place a line break before and after the div element.
Use the tag to group block-elements to format them with styles.

The tag is used to group inline-elements in a document.
Use the tag to group inline-elements to format them with styles

來源:www.w3schools.com


在 W3C 的定義中

DIV 是屬於 block-level(區塊) elements

SPAN 是 inline(行內，Text level) elements.


舉個簡單的例子， 網頁中的文字內容就是屬於 inline(行內) elements。 而 block-level(區塊) elements 則可以把文字、表格、圖層、影像檔案..等內容 Group 起來。 例如一般文字或表格預設是向左靠齊， 若使用 DIV 標籤將一個段落與表格 Group 起來成為一個 block， 則改變 DIV 標籤的 Align(對齊)屬性為向右靠齊， 該文字段落與表格都會同時變成向右靠齊。 因為它們現在屬於同一個block (區塊)。