CSS Display：Block、Inline、Inline-Block 與 Flex 的差異與應用

1. display: block

特性：

• 佔據整行：元素會獨佔一整行，寬度預設為父元素的 100%。

• 垂直排列：多個 block 元素會從上到下排列。

• 可設定寬高：可以自由設定 width 和 height。

• 內邊距和外邊距：支援完整的 margin 和 padding。

• 常見元素：例如 <div>、<p>、<h1> 等預設為 block。

使用場景：

• 需要元素獨立一行，例如段落、標題、容器。

• 希望元素有明確的寬高設定。

2. display: inline

特性：

• 不換行：元素會在同一行顯示，不會強制換行。

• 寬高無效：無法直接設定 width 和 height，寬高由內容決定。

• 外邊距限制：僅支援左右的 margin 和 padding，上下無效。

• 常見元素：例如 <span>、<a>、<strong> 等預設為 inline。

使用場景：

• 用於文字或小範圍的樣式調整，例如超連結、強調文字。

• 不希望元素換行，適合行內元素。

3. display: inline-block

特性：

• 結合 inline 和 block：

  • 像 inline 一樣不換行，元素會在同一行排列。

  • 像 block 一樣支援設定 width 和 height，以及完整的 margin 和 padding。

• 間距問題：由於元素間的空白字符（例如換行或空格），可能會有小間距，需注意。

使用場景：

• 希望元素在同一行排列，但又需要設定寬高。

• 例如按鈕、圖片列表、卡片布局等。

4. display: flex

特性：

• 彈性布局：啟用 Flexbox 布局，子元素（flex items）可以靈活排列。

• 不限於一行：可以設定是否換行（透過 flex-wrap）。

• 可設定寬高：支援完整的 width、height、margin 和 padding。

• 對齊方式：提供強大的對齊控制，例如 justify-content（主軸對齊）和 align-items（交叉軸對齊）。

• 常見用途：用於複雜的布局，例如導航欄、卡片排列、響應式設計。

使用場景：

• 需要靈活的布局，例如水平或垂直居中、等分欄位。

• 適合現代網頁設計，取代傳統的 float 或 inline-block 布局。

總結比較表

屬性	換行	可設寬高	外邊距/內邊距	典型使用場景
block	是	是	完整支援	獨立區塊、段落、容器
inline	否	否	僅左右支援	行內文字、超連結
inline-block	否	是	完整支援	行內排列但需設定寬高的元素
flex	可控	是	完整支援	彈性布局、響應式設計

注意事項

• 間距問題：inline-block 元素間可能因 HTML 的空白字符產生小間距，可透過設定 font-size: 0 於父元素或移除 HTML 換行來解決。

• Flex 進階：flex 提供了許多屬性（如 flex-grow、flex-shrink），適合更複雜的布局，建議深入學習 Flexbox。

• 瀏覽器相容性：現代瀏覽器都支援這四種 display 值，但老舊瀏覽器可能對 flex 支援不完整，需檢查相容性。