本頁只練什麼
能依元素是否要獨佔一行、跟文字同排及接受寬高，選擇 block、inline 或 inline-block。
display 選錯時，常會誤用 margin 或 position 修補換行與尺寸，讓版面更難維護。
要修改的檔案：files/starter/index.html
定位：在 Computed 搜尋 display，先確認目標初始值為 block。｜依 starter-1 定位，只修改「block、inline、inline-block」的責任。
LESSON-05 · TOPIC 01
block、inline、inline-block
能依元素是否要獨佔一行、跟文字同排及接受寬高，選擇 block、inline 或 inline-block。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
服務標籤需要留在同一行又要有固定 padding 與寬度，但目前使用 block 導致每個標籤都換行。
起始狀態：被測標籤是 block；旁邊另有固定 inline 與 inline-block 對照樣本。
完成後要看到
runtime 的 computed display 由 block 變 inline-block；頁面另可指出 inline 不接受一般 width 的版面差異。
驗收證據：runtime before=block、after=inline-block、property=display；另以 Elements 比較三個樣本的換行位置
何時會用到
安排導覽連結、標籤、按鈕或需要可控尺寸又不獨佔一行的元件時。
常見混淆：HTML 元素的預設 display 不等於永遠不能改；display 也不是 visibility，後者不改變盒子類型。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
block、inline、inline-block Block, inline, and inline-block display modes
block 像整排櫃子；inline 像句子裡的字；inline-block 能跟文字同排，也保留盒子的寬高。
正式說法：display 的 outer/inner display type 決定元素如何參與 flow layout；block-level box 形成區塊，inline box 參與行盒，inline-block 產生 inline-level flow-root box。
.badge { display:inline-block; width:8rem; }三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/index.html定位：在 Computed 搜尋 display，先確認目標初始值為 block。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Computed 搜尋 display，先確認目標初始值為 block。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 在 Computed 搜尋 display，先確認目標初始值為 block。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/index.html定位：在 Computed 搜尋 display，先確認目標初始值為 block。要做：執行實驗切換 display-inline-block class，讀取目標元素切換前後的 computed display。
預期：runtime 的 computed display 由 block 變 inline-block；頁面另可指出 inline 不接受一般 width 的版面差異。
證據：runtime before=block、after=inline-block、property=display；另以 Elements 比較三個樣本的換行位置
卡住先查：在 Computed 搜尋 display，先確認目標初始值為 block。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/index.html定位：在 Computed 搜尋 display，先確認目標初始值為 block。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 computed display 由 block 變 inline-block；頁面另可指出 inline 不接受一般 width 的版面差異。
證據：runtime before=block、after=inline-block、property=display；另以 Elements 比較三個樣本的換行位置
卡住先查：在 Computed 搜尋 display，先確認目標初始值為 block。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
block、inline、inline-blockruntime fixture · read-only demo
本主題示範畫面：
被測標籤inline 對照inline-block 對照
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先只問兩件事：要不要獨佔一行？要不要可靠設定寬高？
提示 2｜關鍵片段
要跟文字同排且保留盒子尺寸時，切換為 inline-block。
提示 3｜完整解答與原因
完整解答與原因：block 會形成區塊；inline 參與行盒且一般 width 不決定它的行內尺寸；inline-block 同排又保留盒模型，因此實驗應由 block 變 inline-block。