--- title: "網頁排版的間距系統：8pt 網格與四層間距，讓版面看起來有人在管" slug: web-spacing-system-8pt-guide url: https://rar.design/posts/web-spacing-system-8pt-guide published_at: 2026-08-27 modified_at: 2026-08-27 author: "設計師 Riven" category: "AI 設計" tags: ["UX", "設計系統", "排版", "網頁設計", "8pt", "間距", "Framer"] access: public_access --- # 網頁排版的間距系統：8pt 網格與四層間距，讓版面看起來有人在管 > 一致是及格，層級才是有人在管 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-27 ✱ 板書 ／ FRAMER ／ SPACING ／ 2026Framer 的 Layout 面板 — Gap 與 Padding 這兩格，決定了整頁看起來專不專業的九成QUICK ANSWER網頁排版看起來業餘，多半是間距沒有系統。修法是 8pt 系統：間距只從 4、8、16、24、32、48、64、96 裡挑，再分成元件內、元件間、區塊內、區塊間四層，同一層同一個值，外層一定大於內層。Framer 裡就是 Gap 與 Padding 只填這幾個數。做到這兩件事，版面就看起來有人在管。✱ CHAPTER 01 · WHY IT MATTERS業餘感從哪裡來你一定看過那種網站：字型是好的，配色也不差，圖片還很漂亮，但就是說不出哪裡不對，整頁像是「差一點」。設計師看得出那個差一點在哪——空白。三張卡片之間的距離是 17、23、20；標題到內文這一區是 12，下一區是 15；卡片裡面的留白比卡片之間還大。沒有人會拿尺去量你的網站。但眼睛量得出「不一致」。空白是版面裡最誠實的元素：它不像顏色可以靠品味救、不像字型可以靠授權買，它只反映一件事——這個版面有沒有一套規則在管。所以這篇要談的東西聽起來很小，就幾個數字。但它是我看一個新手作品時第一個看的地方。間距有系統，其他事情都可以慢慢修；間距沒有系統，再貴的字型放上去都像散裝。Sagmeister 說可讀的排版他一個下午能做幾千個。可讀是免費的；讓人一眼覺得「有人在管」，靠的就是這一套。✱ CHAPTER 02 · THE SCALE8pt 系統：只准用這幾個數字8pt 系統只有一條規則：所有間距、尺寸、圓角，只能是 8 的倍數。4 是唯一的例外，留給小東西——icon 跟文字之間、標籤內的留白。為什麼是 8。第一，8 可以被 2 跟 4 整除，在 1x、2x、3x 的螢幕上都是整數像素，不會出現半像素的糊邊。第二，8 的倍數彼此差距夠明顯，16 跟 24 一眼分得出來，17 跟 20 分不出來。第三，決策變少了——你只需要在八個數字裡挑，而不是在 1 到 100 之間猜。✱ SPACING SCALE ／ 八個數字4微調icon 與文字之間、標籤內留白8緊同一組元素內的最小距離16元件內卡片、按鈕裡的 padding24元件間卡片與卡片、欄與欄32段落內文段落群之間48區塊內標題到它的內容64區塊邊小型 section 的上下留白96區塊間大型 section 的上下留白Apple 與 Google 的介面規範都以 8 為底，iOS 講 8pt、Material 講 8dp，這不是巧合，是螢幕像素的物理。你不用背它們的文件，記住這八個數字就夠。✱ CHAPTER 03 · FOUR LEVELS四層間距：外層永遠大於內層有了數字，下一個問題是「哪裡用哪個」。我把一頁網站的空白分成四層，每一層對應版面裡的一種關係：✱ FOUR LEVELS ／ 一個 section 的解剖區塊間 · SECTION PADDING96區塊內 · 標題到內容48元件間 · GAP24元件內 · PADDING16元件內 · PADDING16元件內 · PADDING16由外往內 96 → 48 → 24 → 16，每往裡一層就小一階規則只有一條：外層永遠大於內層。這是格式塔的接近性原則——距離近的東西會被看成一組。卡片裡的 padding 如果比卡片之間的 gap 還大，眼睛會把兩張卡的邊緣看成一組、把卡片裡的內容看成散的，整個結構就反了。這也是為什麼「間距一致」還不夠。四層全部用 24，看起來很整齊，卻讀不出誰屬於誰。一致是及格，層級才是有人在管。✱ NOTE這四個數字是比例，不是鐵律。手機版全部降一階——96 變 64、48 變 32、24 變 16、16 變 8——比例沒變，層級就沒變。反過來說，只降其中一層，結構就會在手機上垮掉。✱ CHAPTER 04 · TYPE RHYTHM文字的間距也在 8 裡行高是整套系統的基準。內文 16px 配 1.5 的行高，一行就是 24px；這個 24 同時是垂直節奏的單位——段落之間空一行行高，剛好又落回 8 的倍數。標題最常見的錯是上下等距。標題屬於它下面那一段，所以上方要比下方遠：上 48、下 16。做對這一條，讀者不用讀內容就知道每一段從哪裡開始。字級階層與行高的細節下一篇再講，這裡先記這條。元素間距為什麼內文行高2416px 字級乘 1.5，整套節奏的基準單位段落之間24空一行行高，眼睛能分段又不會斷氣標題下方16標題屬於它下面那段，要貼近標題上方48跟上一段切開，讓人知道新的一節開始了圖說與圖8圖說是圖的一部分，貼著放✱ CHAPTER 05 · COLUMNS欄位網格：橫向也要有規則8pt 管的是垂直與元件內的空白，橫向要靠欄位網格。12 欄是業界預設，理由很實際：12 能被 2、3、4、6 整除，兩欄、三欄、四欄版面都切得乾淨。欄距用 24 或 32，也落在 8 的倍數裡；內容最大寬度抓 1200 上下，再寬一行字就太長，眼睛回不到下一行的開頭。Framer 的 Guides 面板 — 預設 Gap 30、Margin 15 都不是 8 的倍數，改成 32 跟 24，整套就對齊了網格線是輔助線，不是元件。它用來對齊欄位邊緣、確認三欄卡片的寬度一致；真正決定版面的還是 Stack 與 Grid 的 gap。畫完可以關掉，關掉之後版面不會變。✱ CHAPTER 06 · IN FRAMER在 Framer 裡落地：Gap、Padding 與變數Framer 沒有 margin 這個屬性，這件事反而幫了忙。所有空白只有兩個來源：父層的 Padding（容器與內容之間）跟 Stack 的 Gap（內容與內容之間）。想加空白只能從這兩格填，就不會出現到處塞空白 frame 撐距離的版面。四層對應到 Framer 剛好是四層巢狀 Stack：區塊間是每個 Section 的上下 Padding，填 96；區塊內是 Section 那層 Stack 的 Gap，填 48；元件間是卡片列的 Gap，填 24；元件內是卡片本身的 Padding，填 16。Layers 面板裡巢狀的層數，就是間距的層數。右側屬性面板的 Padding 20、Radius 20 — 換成 16 或 24，就進了 8 的系統再往上一層是變數。Framer 的 Stack Variables 讓元件裡的 Gap 與 Padding 可以綁成控制項——同一個卡片元件，桌機的實例填 24、手機斷點填 16，不用為了間距多做一組 Variant。把 Section 跟卡片都做成元件，間距值就只存在一個地方，之後要改，改一次全站跟著動。官方 Fundamentals 系列有一支專門講 Stack 與相對定位，Gap 跟 Padding 的行為十五分鐘講完：Framer 官方 Fundamentals — Stack 與相對定位Framer Agents 生出來的版面，間距通常是合格的通用值——20、40、80。那也是一套規則，只是它的規則不是你的。接手第一件事就是把數字換成你的階梯，順便把它塞進去撐距離的空白 frame 清掉。上一篇講的六段說服順序決定區塊怎麼排，這一篇決定區塊之間留多少；兩件事都做完，AI 生的頁面才會變成你的頁面。✱ CHAPTER 07 · MISTAKES五個最常見的間距錯誤這五個我在學生作品裡看過幾百次，每一個都有一分鐘內的修法。錯誤症狀修法用空白 frame 撐距離一切到手機版就跑掉刪掉，改父層 padding 或 stack gap卡片內 padding 大於卡片間 gap內容看起來散，卡片黏在一起內 16、間 24，外層大於內層標題上下等距標題像浮在兩段中間上 48、下 16手機沿用桌機間距一屏只看到兩行字全部降一階每一頁重新決定首頁跟關於頁像兩個網站四個數字寫下來，全站共用一致是及格，層級才是有人在管。✱ CHAPTER 08 · TAKEAWAYS上線前的五題自檢照順序做，五分鐘。1隨機點五個 Stack打開 Layers 面板隨機點五個 Stack，看 Gap 與 Padding 是不是全部落在 8 的倍數裡。有一個不是，通常就有十個不是。2找一張卡片卡片裡的 padding 有沒有小於卡片之間的 gap。反了就是結構反了。3找一個標題上方是不是比下方遠。等距的話，讀者分不出它屬於哪一段。4切到手機斷點Section 的上下 padding 有沒有降一階。沒降的話手機上一屏只剩兩行字。5把兩頁並排首頁跟第二個頁面並排看，同一層的間距是不是同一個數字。✱ 這一篇的黑板✱ 間距只用八個數字：4、8、16、24、32、48、64、96。決策變少，版面才會一致。✱ 四層間距：元件內 16、元件間 24、區塊內 48、區塊間 96。外層永遠大於內層。✱ 行高 24 是垂直節奏的基準；標題上 48、下 16，讓它屬於下面那一段。✱ 橫向靠 12 欄網格，欄距 24 或 32，內容寬度 1200 上下。✱ Framer 裡只有 Padding 與 Gap 兩個空白來源，四層巢狀 Stack 就是四層間距，值綁變數只存一處。版面看起來有人在管，通常真的只是因為有人決定了八個數字，然後不再改變主意。這是整套設計裡最便宜的一件事，也是最容易被跳過的一件事——因為它做對的時候，沒有人會注意到。✱ RELATED READS ／ 延伸閱讀一頁式網站為什麼好看卻沒人填表單？從 Hero 到 CTA 的六段說服順序順序決定區塊怎麼排，這篇決定區塊之間留多少。閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具還在評估要不要跳進來的話，從這篇開始。閱讀文章 →Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學卡片列一旦接 CMS，Gap 設一次就全部一致。閱讀文章 →Claude Code 怎麼做出沒有 AI 感的網站？AI 生的間距是它的規則，這篇講怎麼把你的規則餵回去。閱讀文章 →Claude Design 怎麼用？從一句話做出互動網頁的完整教學讀得懂設計系統的工具，先要有一套間距系統給它讀。閱讀文章 →繁體中文圓體字型去哪找？昭源環方的圓角化原理、十種字重與商用授權完整解析間距對了，下一步是字級與字型。閱讀文章 →✱ EXTRA ／ 官方資源Framer 官方說明：加入欄位網格（Guides）Framer Academy：Stack 與相對定位Framer Academy：Stack 與 Grid 的差別Framer Updates：Stack VariablesFramer 官網（免費開始）COURSEFramer 網站設計課：從零開始三個專案的 Stack 與 Grid 都做過了，課後教材這一層是把 Gap 跟 Padding 換成同一套數字。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →✱ FAQ常見問題✱ 一定要 8 嗎？4 或 10 的倍數可以嗎？4 是 8 的半步，很多系統拿它當微調用，沒問題。10 的倍數在 2x 螢幕會出現半像素邊，而且 10、20、30 差距太平均，層級感比 8、16、24、48 弱得多。用 8，例外留給 4。✱ 8pt 系統是做 App 用的，網頁也適用嗎？適用，邏輯一樣。差別在網頁的區塊間距會大得多，96 到 160 都常見，因為視口高、頁面靠捲動閱讀，區塊之間要留得夠開才分得出段落。✱ Framer 沒有 margin，外距怎麼做？不需要 margin。所有外距都改用父層的 padding 或 stack 的 gap 表達，反而不會出現 margin 疊加或塌陷那類 CSS 常見的 bug。✱ 圓角跟圖片尺寸也要 8 的倍數嗎？圓角建議跟著走，8、16、24 三檔通常夠用。圖片本身的像素可以不是，但圖片的容器尺寸與它周圍的間距要在系統裡。✱ 從 Figma 匯進 Framer 的設計，間距亂掉怎麼修？打開 Layers 面板逐個 Stack 檢查 gap 與 padding，把不是 8 倍數的值就近取整；卡片做成元件之後只要改一次。一頁通常一小時內修得完。✱ 客戶說留白太多怎麼回？先給他看手機版，留白在手機上會自動降一階。再把討論從「留白」轉到「層級」——問他哪一塊希望更醒目，答案通常是縮小其他東西，不是塞滿空白。