網頁排版的間距系統：8pt 網格與四層間距，讓版面看起來有人在管
2026年8月27日 下午 9:58
AI 設計✱ 板書 ／ FRAMER ／ SPACING ／ 2026
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 SCALE
8pt 系統：只准用這幾個數字
8pt 系統只有一條規則：所有間距、尺寸、圓角，只能是 8 的倍數。4 是唯一的例外，留給小東西——icon 跟文字之間、標籤內的留白。
為什麼是 8。第一，8 可以被 2 跟 4 整除，在 1x、2x、3x 的螢幕上都是整數像素，不會出現半像素的糊邊。第二，8 的倍數彼此差距夠明顯，16 跟 24 一眼分得出來，17 跟 20 分不出來。第三，決策變少了——你只需要在八個數字裡挑，而不是在 1 到 100 之間猜。
✱ SPACING SCALE ／ 八個數字
4
8
16
24
32
48
64
96
Apple 與 Google 的介面規範都以 8 為底，iOS 講 8pt、Material 講 8dp，這不是巧合，是螢幕像素的物理。你不用背它們的文件，記住這八個數字就夠。
✱ CHAPTER 03 · FOUR LEVELS
四層間距：外層永遠大於內層
有了數字，下一個問題是「哪裡用哪個」。我把一頁網站的空白分成四層，每一層對應版面裡的一種關係：
✱ FOUR LEVELS ／ 一個 section 的解剖
由外往內 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。做對這一條，讀者不用讀內容就知道每一段從哪裡開始。字級階層與行高的細節下一篇再講，這裡先記這條。
✱ CHAPTER 05 · COLUMNS
欄位網格：橫向也要有規則
8pt 管的是垂直與元件內的空白，橫向要靠欄位網格。12 欄是業界預設，理由很實際：12 能被 2、3、4、6 整除，兩欄、三欄、四欄版面都切得乾淨。欄距用 24 或 32，也落在 8 的倍數裡；內容最大寬度抓 1200 上下，再寬一行字就太長，眼睛回不到下一行的開頭。
網格線是輔助線，不是元件。它用來對齊欄位邊緣、確認三欄卡片的寬度一致；真正決定版面的還是 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 面板裡巢狀的層數，就是間距的層數。
再往上一層是變數。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
五個最常見的間距錯誤
這五個我在學生作品裡看過幾百次，每一個都有一分鐘內的修法。
一致是及格，
層級才是有人在管。
✱ CHAPTER 08 · TAKEAWAYS
上線前的五題自檢
照順序做，五分鐘。
隨機點五個 Stack
打開 Layers 面板隨機點五個 Stack，看 Gap 與 Padding 是不是全部落在 8 的倍數裡。有一個不是，通常就有十個不是。
找一張卡片
卡片裡的 padding 有沒有小於卡片之間的 gap。反了就是結構反了。
找一個標題
上方是不是比下方遠。等距的話，讀者分不出它屬於哪一段。
切到手機斷點
Section 的上下 padding 有沒有降一階。沒降的話手機上一屏只剩兩行字。
把兩頁並排
首頁跟第二個頁面並排看，同一層的間距是不是同一個數字。
✱ 這一篇的黑板
✱ 間距只用八個數字：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 Variables
Framer 官網（免費開始）
✱ 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 倍數的值就近取整；卡片做成元件之後只要改一次。一頁通常一小時內修得完。
✱ 客戶說留白太多怎麼回？
先給他看手機版，留白在手機上會自動降一階。再把討論從「留白」轉到「層級」——問他哪一塊希望更醒目，答案通常是縮小其他東西，不是塞滿空白。