CSS display 屬性

display 屬性決定了元素的顯示方式，是 CSS 排版中最重要的屬性之一。

display: block

區塊元素 (block element) 的特性：

• 獨佔一整行，前後會換行
• 寬度預設是父元素的 100%
• 可以設定 width、height、margin、padding

div {
  display: block;
}

常見的區塊元素：<div>、<p>、<h1>~<h6>、<ul>、<li>、<section> 等。

<div style="background: lightblue;">區塊一</div>
<div style="background: lightgreen;">區塊二</div>
<!-- 兩個 div 會各自獨佔一行 -->

display: inline

行內元素 (inline element) 的特性：

• 不會換行，和其他行內元素並排在同一行
• 寬度和高度由內容決定
• 無法設定 width 和 height
• 上下 margin 和 padding 不會影響排版（不會推開其他元素）

span {
  display: inline;
}

常見的行內元素：<span>、<a>、<strong>、<em>、<img> 等。

<span style="background: lightblue;">行內一</span>
<span style="background: lightgreen;">行內二</span>
<!-- 兩個 span 會在同一行 -->

display: inline-block

結合了 inline 和 block 的特性：

• 和其他元素並排在同一行（像 inline）
• 可以設定 width、height、margin、padding（像 block）

.button {
  display: inline-block;
  width: 100px;
  height: 40px;
  padding: 10px;
}

inline-block 常用於：

• 水平排列的按鈕或卡片
• 需要設定大小但又要並排的元素

<a class="button">按鈕一</a>
<a class="button">按鈕二</a>
<!-- 兩個按鈕會並排，且可以設定寬高 -->

display: none

完全隱藏元素，元素不會佔據任何空間，就像不存在一樣。

.hidden {
  display: none;
}

常用於：

• 隱藏/顯示選單
• 根據條件顯示不同內容
• 響應式設計中隱藏某些元素

display: flex

啟用 Flexbox 彈性盒子佈局，用於一維排版（水平或垂直）。

.container {
  display: flex;
}

Flexbox 可以輕鬆實現：

• 水平/垂直置中
• 等分空間
• 彈性伸縮

詳細內容請參考 CSS Flexbox。

display: grid

啟用 Grid 格線佈局，用於二維排版（同時控制行和列）。

.container {
  display: grid;
}

Grid 適合用於：

• 網頁整體佈局
• 複雜的格狀排列

詳細內容請參考 CSS Grid。

display: inline-flex 和 inline-grid

讓 flex 或 grid 容器本身表現為 inline 元素：

.inline-flex-container {
  display: inline-flex;
}

.inline-grid-container {
  display: inline-grid;
}

三種基本 display 值比較

改變預設 display

你可以用 CSS 改變元素的預設 display 值：

/* 讓 span 變成區塊元素 */
span {
  display: block;
}

/* 讓 li 水平排列 */
li {
  display: inline-block;
}

/* 讓 div 變成行內元素 */
div.inline {
  display: inline;
}