共通設計理論教材 / Class LLL

留白與關係間距

哪兩段應該一起讀？

固定三組站點時間與集合說明，分開改組內、組間距，檢查它們正在提示哪種關係。換查找目的與窄容器，再說明為什麼留白不能一律增加或固定8px倍數。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 8 分鐘

開啟互動教材查看參考來源

閱讀目標

先定義資訊關係再量間距
獨立改一種空間並觀察
換目的或容器後檢查理由

適用條件與學習範圍

時間和集合處之間的距離，與兩個站點之間的距離，應該承擔一樣的用途嗎？

能區分同組內容與另一組資訊；可補讀欄格、模組與基線。

能把組內、組間及容器周圍空間分開描述，完成只改一種間距的比較，依資訊關係與目的提出保留或修改理由。

不提供所有版面的最佳間距、通用8px規則或人的分組預測；不把空間多當成必然清楚。

原理與判斷

留白不只指白色底紙；深色介面裡內容之間與四周的空間也能組織版面。這裡把問題收窄：一個站點的時間和集合說明應能互相配對，三個站點又需要可以分辨。先說這兩層關係，再調兩種間距。數字不是人的理解答案。把組內距設小、組間距設大，可以作為一個待比較的提示方案；仍須讀文字，才能知道哪些資訊真的屬於同站。空間安排不能替文案正確性或資料結構作保證。

先分清空間的對象

校樣有三組固定資訊，每組包含一個站名／時間標題與一段集合說明。組內間距指這兩個文字盒之間的空間，組間間距指相鄰兩組文字盒的邊緣距離；底紙四邊另有固定16px內距。不要把三種距離統稱「全部加大」。按正面行程校樣可看目前瀏覽器的真實HTML排樣；架上的縮略只方便看整體，不用來量px。觀察窗內若內容超出，可捲動繼續讀，另有正常文字補讀。

只改組內，再改組間

以8／24起點開始，先只把組內從8調到20，組間仍24。核對是同站的兩段分開了，還是兩個站點之間變遠；讀數和正面空間會同步，不自行幫你判斷哪組更好。還原後只改組間。這次站點之間變化，每組內部仍相同。若你擔心說明和下一站標題混在一起，可描述具體的相鄰文字，再提出修改；不能只說「空氣感比較好」卻沒有指明關係。

全部同距也有代價

全部同距16／16讓兩種邊緣距離一樣。它可能適合某種規整排列，但此例沒有因此標出同站的配對差別；反過來，也不能因間距不同就宣稱讀者必然分組成功。兩個預設按鈕各自同時改兩個值，只作新起點，不當單變因比較。 IBM用底色 unit與倍數組織自家系統，8px是其產品／網頁方案。本站示範可調到5或17，目的在區分關係；不是證明整數、偶數或8的倍數具有普遍心理優勢。

換問題，原方案未必足夠

把任務改成找東站集合處。時間對齊或空間變大，仍不能直接回答集合位置；需要讀到中央服務台。指出你希望哪段內容靠近哪個標題，以及必要文字是否仍可見。再切窄180，內容、字級、順序不變，但文字會依目前字體換行，組的高度因此可能改變。既有間距方案需要放回新容器看，而不是把整張圖縮小或把留白全刪掉。密度教材會繼續比較這個取捨。

步驟與觀察

先說三層空間
辨認組內、組間和底紙四周，說明各自隔開什麼；不用「留白」一詞掩蓋實際對象。
只調一種間距
固定組間24，只調組內；還原再反過來。記下具體哪兩段文字的距離改變。
比較同距起點
換16／16後，指出原本兩種關係是否還有空間差別；再用單一滑桿尋找下一個比較，避免把預設當實驗。
換目的和窄容器
找東站集合處，再切窄180。補讀密度教材後返回原頁，確認自己的間距與寬度方案還在。

常見問題

留白等於所有空間都加大

先分清組內、組間、四周與文字行內空間；一次只改負責那個關係的一種距離。

看到小距離就當資料同組

空間只是提示，讀文字與來源資料核對；本教具不計算人的分組結果。

用8px品牌方案當所有介面通則

說明設計系統的範圍、媒介與用途；有一致單位可幫管理，但不保證每種內容合適。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：同一繁中短行程的組內／組間距、容器寬度與閱讀目的比較；跨工具的版面觀察。來源狀態：已重新開IBM三頁公開正文，讀S12的行距、Alignment、Comfortable reading、Line lengths within containers；S13的Adjusted scale及文字 scale字級／行高說明；2x 格點的Margins、Gutters、Base unit／Spatial relationships。均為IBM與Plex品牌實務，不當人類分組實驗、所有語系最佳間距或普遍8px規範。未引用未讀專著或把Plex公式／95%直接套Noto。QZ21的原典補核狀況沿其紀錄，此票不擴增全書已讀聲稱。示意限制：原創虛構北／南／東站三組時間與集合說明，文案、順序、字級不變；獨立改組內4–20px、組間8–48px、容器300／180 CSS px。原生HTML換行在正面觀察窗顯示，固定文字補讀；重用40件校樣架，滑座跟組內距同源。不是留白率或心理密度算法，未搬來源圖版。原生軟體實測：沒有Photoshop／Illustrator／Figma原生排版實測；本站正面是目前瀏覽器的CSS排樣，不冒稱三軟體相同換行或吸附。學習成效驗證：未做真人、眼動、查找速度、理解率或美感實驗；間距讀數與自行插旗不能證明讀者把哪些當成同組。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。