全站間距不一致，CSS 從 Additional CSS 拆出去

整理日期：2026-04-06

狀況

同一個網站裡，不同頁面的內容頂端間距不一致。

首頁、文章頁、商品頁、彙整頁和訂閱頁，各自看起來都還可以，但放在一起看就不整齊。

同時，Additional CSS 已經累積到很肥。很多頁面專屬樣式每一頁都載入，之後要找一段 CSS 是從哪裡來，也越來越難。

先拆成幾層看

我會先拆成幾層：

佈景主題本身有沒有全站 content padding。
第一個區塊自己有沒有 padding-top。
Query Loop、商品列表、文章模板是不是又各自加了一層。
Additional CSS 裡是否混了全站樣式和頁面專屬樣式。
哪些 CSS 應該全站載入，哪些只該在特定頁載入。

這種問題不能只看 CSS 原始碼。要用 DevTools 看 computed spacing，因為實際距離通常是好幾層 padding 疊出來的。

最後發現

間距不一致的原因，是佈景主題給了一層基礎 padding，各頁第一個區塊又各自加了不同 padding。

久了之後，每一頁都用自己的方式補空間。

CSS 管理也有同樣問題。大量頁面專屬 CSS 全部塞在 Additional CSS 裡，短期方便，長期會變成不好維護的混合檔。

修正方式

把全站內容間距交回佈景主題設定，讓它成為主要來源。

其他頁面第一層區塊如果只是為了補頂端距離，就把 padding 拿掉或調回 0。

CSS 管理則拆成幾個條件載入的 Code Snippets：

全站共用 CSS。
文章內頁 CSS。
彙整頁 CSS。
商品頁 CSS。
帳號頁 CSS。
訂閱頁 CSS。
About 頁 CSS。

概念像這樣：

add_action('wp_head', function () {
    if (!is_single()) return;
    ?>
    <style id="css-single-post">
      /* 只給文章內頁的 CSS */
    </style>
    <?php
});

這樣每一段 CSS 的責任比較清楚，也不會所有頁面都載入不需要的樣式。

不建議先做的事

不要看到哪一頁太擠，就直接再加一段 margin 或 padding。

這樣短期會變好，但幾頁加起來很快會互相打架。

也不要讓 Additional CSS 長期變成所有東西的垃圾桶。超過一定量之後，維護成本會比拆開還高。

下次遇到可以先整理什麼

各頁 header 到第一段內容的實際距離。
距離是哪些 padding / margin 疊出來的。
哪些樣式是全站共用。
哪些樣式只屬於單一頁面或單一模板。
CSS 目前放在 Additional CSS、Code Snippets、區塊設定，還是佈景主題設定。

間距要先決定「主控權」在哪裡。沒有主控權，每頁都會變成特例。