探索 HTML 元素的兩種主要顯示方式：block 和 inline。本文深入比較這兩者在顯示和佈局上的差異，並介紹如何透過 CSS 的 display 屬性進行設置。還將探討特殊的 inline-block 元素，結合了 block 和 inline 的特性，提供更多靈活的佈局選擇。
Block Element (區塊元素)
區塊元素的特色為
透過 display: block; 進行設置，以下由範例會選一個預設就是區塊元素的 p tag 進行示範。
佔滿整行，也就是說一個區塊級元素會從新的一行開始，如三個 p tag 會分別佔滿三行。
Preview Html 我是第一行
我是第二行
我是第三行
我是第一行
我是第二行
我是第三行
我們也可以給予區塊級元素指定寬度，但他還是會佔滿整行，現實中常給予區塊級元素一個寬度並用 margin: 0 auto; 來進行水平置中。
Preview Html
我是第一行
我是第一行
Inline Element (行內元素)
行內元素的特色為
透過 display: inline; 進行設置，以下由範例會選一個預設就是行內元素的 span tag 進行示範。
行內元素緊鄰著前後的元素
preview code 我是第一個 span我是第二個 span，我會緊跟著前面的元素喔！！ 我是第一個span
我是第二個span，我會緊跟著前面的元素喔！！
行內元素的寬度是根據他的內容決定
行內元素的 width 及 height 是沒有效的
Preview Html 100vw span100vh span 100vw span
100vh span
Inline Block Element
Inline Block 是一個特殊的存在，結合了上述兩者的一些特性，常常有一種情形是我們需要 行內元素的特性，又希望可以指定行內元素的寬高，因此 Inline Block 是非常好的一個解決方案。
透過 display: inline-block; 進行設置。
Preview Html 100% span
100% span
參考文件
MDN Block-level elements
MDN Inline elements
MDN CSS Display