CSS display 怎麼用：block、inline、inline-block、none、flex、grid 一次看懂

改網頁時常遇到這些狀況：

• 幫 <span> 設了寬度、高度，畫面完全沒變。
• 連結加了上下的 padding 想做成按鈕，結果按鈕蓋到上一行的字。
• 想在手機上把某一塊藏起來。

這些都和 display 有關。display 決定一個元素「怎麼排」：自己佔一整行、跟文字排在一起，還是把裡面的東西排成一列或一格一格。

block、inline、inline-block

先看三個最基本的值。三個 <span> 都設一樣的寬高，只差在 display：

/* 三個 span 都設一樣的寬高，只差在 display */
.box { width: 120px; height: 48px; background: #e0f2f1; }

.box.is-inline       { display: inline; }       /* span 的預設值：寬高沒有作用 */
.box.is-inline-block { display: inline-block; } /* 排在同一行，寬高有作用 */
.box.is-block        { display: block; }        /* 自己佔一整行，寬高有作用 */

我們在 Chrome 量到的結果：

• inline：41 × 21 像素，照文字的大小，設的寬高沒有用；跟前後的文字排在同一行。
• inline-block：120 × 48 像素；跟前後的文字排在同一行。
• block：120 × 48 像素；自己換一行。
• block：自己佔一整行，前後的東西都會被擠到上下。可以設寬高、上下左右的間距。<div>、<p>、<h1>～<h6>、<ul> 預設都是 block。
• inline：像文字一樣，排在同一行，放不下就換行。寬度、高度沒有作用，大小由內容決定。<span>、<a>、<strong>、<img> 預設都是 inline。
• inline-block：兩者的綜合，跟文字排在同一行，但寬高、間距都有作用。按鈕、標籤、小徽章最常用。

連結做成按鈕：用 inline-block

<a> 預設是 inline。加了上下 padding，背景色會畫出來，但不會把上下的行推開，按鈕就蓋到上一行、下一行的字。

/* 連結做成按鈕：a 預設是 inline，上下的 padding 不會把旁邊的行推開 */
.cta {
  display: inline-block;
  padding: 12px 24px;
  background: #1e8a8a;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}

實測：同一段三行文字，按鈕是 inline 時，段落高度 82 像素，按鈕的底色壓到上下兩行；改成 inline-block，段落變成 106 像素，上下行被推開，按鈕完整顯示。

隱藏：display: none 和 visibility: hidden

.gone   { display: none; }       /* 不顯示，也不佔位置 */
.hidden { visibility: hidden; }  /* 看不到，但位置還留著 */

• display: none：整個不見，也不佔位置，後面的內容會補上來。
• visibility: hidden：看不到，但位置還留著，畫面上會空一塊。

實測：display: none 的段落完全沒有被畫出來；visibility: hidden 的段落雖然看不到，還是佔了 27 像素高的空間。

大部分「不要顯示」的情況用 display: none；只有在想保留版面、不讓旁邊的東西移動時（例如切換顯示時不想讓畫面跳動），才用 visibility: hidden。

手機不顯示某一塊

搭配 @media，就能只在手機上隱藏：

/* 手機（寬度 600px 以下）不顯示側邊欄 */
@media (max-width: 600px) {
  .sidebar { display: none; }
}

實測寬度 1280 時側邊欄有顯示，寬度 390 時不見了。

要注意：display: none 只是看不到，網頁原始碼裡還是有這段內容。我們在 Chrome 用手機寬度測：藏起來的區塊裡，一般的 <img> 圖片還是會下載；加了 loading="lazy" 的圖片和 CSS 背景圖就不會下載。WordPress 內文的圖片多半會自動加上 loading="lazy"，但自己寫的 HTML 不一定有。很大的區塊或很重的影片，最好從源頭就不要輸出，而不是靠 CSS 藏。

flex：把東西排成一列

display: flex 讓裡面的元素排成一列，最常用來做「一排圖示加文字」、導覽列、按鈕群組：

/* 一排圖示加文字：垂直置中、間距一致，空間不夠自動換行 */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

• gap 統一設定元素之間的距離，不用每個元素各自設 margin。
• align-items: center 讓高低不同的元素垂直置中。
• flex-wrap: wrap 空間不夠時自動換行。

實測 4 個項目：寬度 1280 排成一列，寬度 390 自動排成兩列。

以前常用 inline-block 排成一列，但 inline-block 之間會多出一小段空白（來自 HTML 裡的換行），間距很難對齊；flex 就沒有這個問題。

grid：排成一格一格

display: grid 適合卡片列表、相簿、商品列表這種「一格一格」的版面：

/* 卡片列表：每張至少 240px，寬螢幕自動排多欄，手機變一欄 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

repeat(auto-fit, minmax(240px, 1fr)) 的意思是：每張卡片至少 240 像素寬，空間夠就多排幾欄，剩下的寬度平均分給每一欄。不用寫 @media，手機就會自動變一欄。

實測：內容寬 900 像素時排成 3 欄，寬度 390 的手機排成 1 欄。

怎麼查一個元素現在的 display

在 Chrome 對著元素按右鍵選「檢查」，開發人員工具右邊有一個 Computed 分頁（列出最後算出來的樣式），在裡面搜尋 display，就能看到它現在的值。設了寬高沒反應時，先看是不是 inline。

延伸閱讀

• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
• 網頁側邊浮動按鈕怎麼做：LINE、電話、回到頂端、分享，純 HTML＋CSS
• CSS 背景圖設定：background-size 與手機版寫法

正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供 RWD 響應式客製化網頁設計，台北與全台客戶也歡迎來聊聊。