up
down
Close
架站盒子
Web Development Box
 

HTML 區塊元素與行內元素的差別

│ 1727 Views │ HTML
HTML 區塊元素與行內元素的差別
HTML 區塊元素與行內元素的差別
  1. 何謂元素
  2. 區塊元素
  3. 行內元素
  4. 元素包含元素

何謂元素

在說區塊元素與行內元素之前,我們先了解什麼是元素,元素(Element)是 HTML 結構的基礎,如pdivspan等,這些都是元素,沒有它們就無法對頁面進行排版。

所有的元素都會預設display的值,值有很多種,如blockinlineflexcompact等,其中block屬於區塊元素,inline屬於行內元素。

區塊元素

區塊元素(block)顧名思義就是會呈現一個區塊,其寬度預設為填滿父元素,因此無法與其他元素並排,當有多個元素時其區塊前後直接會產生斷行。

區塊元素

address、article、aside、blockquote、canvas、dd、div、dl、dt、fieldset、figure、footer、form、h1-h6、header、hr、ol、ul、li、main、nav、p、pre、table、tfoot、video

區塊呈現方式

See the Pen block-element HTML by kumo (@kumo-tw) on CodePen.

上面範例父元素(box)設定寬度為300px,子元素(content)預設會填滿父元素(相當於width:100%),因此這裡的子元素寬度也是300px。

並排呈現方式

See the Pen block-element break HTML by kumo (@kumo-tw) on CodePen.

區塊元素遇到其他元素並排時,會自動換到下一行。

設置寬、高、行高、邊距

區塊元素可以設置寬、高、文字行高與邊距等,以下為範例。

See the Pen block-element width HTML by kumo (@kumo-tw) on CodePen.

行內元素

行內元素(inline)顧名思義就是會呈現一行,多個行內元素會並排在同一行,直到填滿寬度後才會換行,其元素寬度隨內容寬度而改變,例如span的寬度隨文字長短而改變,行內元素無法設置寬高與上下外距。

行內元素

a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、img、input、kbd、label、map、object、output、q、samp、script、select、small、span、strong、sub、sup、textarea、time、tt、var

行內元素呈現方式

See the Pen inline element HTML by kumo (@kumo-tw) on CodePen.

上面範例可以看到無法設置寬與高,以及下上的外距(margin),但內距可以設定上下左右,也可以設置文字行高,當行內元素並排時可以排在同一行,如果加上br換行標記則會換行,否則將排到版面寬度後才換行。

元素包含元素

區塊元素可以包含區塊元素或行內元素,但h1~h6pdt只能包含行內元素,無法包含區塊元素。

行內元素只能包含行內元素,不能包含區塊元素(會斷掉),但連結a例外,它可以包含區塊元素(唯獨不能包含連結)。

範例如下

See the Pen element include element HTML by kumo (@kumo-tw) on CodePen.

以上就是區塊元素與行內元素的差別,希望有幫到有疑問的朋友。

延伸閱讀

本文是否對您有幫助?