何謂元素
在說區塊元素與行內元素之前，我們先了解什麼是元素，元素（Element）是 HTML 結構的基礎，如p、div、span等，這些都是元素，沒有它們就無法對頁面進行排版。
所有的元素都會預設display的值，值有很多種，如block、inline、flex、compact等，其中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~h6、p、dt只能包含行內元素，無法包含區塊元素。
行內元素只能包含行內元素，不能包含區塊元素（會斷掉），但連結a例外，它可以包含區塊元素（唯獨不能包含連結）。
範例如下
See the Pen element include element HTML by kumo (@kumo-tw) on CodePen.
以上就是區塊元素與行內元素的差別，希望有幫到有疑問的朋友。