Divi 文字貼著區塊邊緣，想留白時應先看 Padding；如果是整個模組與旁邊內容太近，才檢查 Margin。兩者都能讓畫面出現空白，但空白所在的位置不同。用錯欄位時，可能只是把整個模組推走，文字與自己的背景邊緣仍然擠在一起。
本文用 Divi 5 Text 模組做一個小測試：先只加頂部二十四像素 Padding，再改成頂部二十四像素 Margin，量測模組與標題的位置。數值只是為了讓差異容易看清，正式網站應按內容與版面決定距離，沒有每個模組都要填二十四像素的規則。
先分清內部留白與外部距離
Padding 位於元素內容與邊框之間，適合處理文字距離自己的盒邊太近。Margin 位於元素盒的外面，適合分開模組與其他元素。若模組有背景，增加 Padding 通常會讓內容周圍多出仍屬於該模組的區域；Margin 則是盒外距離，不會變成模組內部背景的一部分。
例如一張服務說明卡，文字距離卡片左邊太近，先調整卡片或文字容器的左 Padding。若兩張卡靠得太近，則要看外距或父容器的 Gap。這些選項可能同時參與最終距離，因此修改前先辨認自己想改哪一段，不要見到留白問題就全部填上相同值。
如果文字與背景其實分屬不同容器，應先確認背景套在哪一層。你改 Text 的內距，未必會改到外層 Column 的背景邊界；畫面上看似同一張卡，結構上可能由幾個元素組成。
在正確的模組打開 Spacing
從 Layers 選取測試 Text 模組，確認面板顯示 Text，再到 Design 展開 Spacing。裡面有 Margin 和 Padding，各自包含 Top、Bottom、Left、Right。這次只修改 Top，其他方向維持原本狀態，避免一次改四邊而看不出差異。
留意兩個相對方向之間的鏈結控制。若它處於聯動狀態，修改 Top 可能同時帶動 Bottom；你本來只想測一側，就應先確認是否需要解除聯動。每次輸入後重新看欄位值，比只記得自己敲了什麼數字可靠。
也要確認目前編輯裝置。本文實測是在五百像素手機畫布裡操作；你自己的桌面、平板與手機可能使用不同覆寫值。先固定一個裝置，再比較 Padding 與 Margin，才能把響應式變化與盒模型差異分開。
先只增加頂部 Padding
初始測試中，Text 的頂部 Padding 和 Margin 都是零。模組頂部與內部 H2 標題頂部的位置都是一百零一點五九三七五像素，模組高度為七十四點三二八一二五像素。這些是當時畫布的量測結果，不是 Divi 預設高度。
把 Padding Top 設為二十四像素，離開欄位後再看結果。模組頂部仍在原位置，標題頂部往下二十四像素，模組高度增加二十四像素。也就是模組內部多出空間，內容往內移，整個盒因此變高。
這正適合說明「文字離自己的盒邊太近」的處理方向。若你改的是固定高度容器，或另有尺寸限制，實際結果可能不同；因此要看文字是否被擠壓、裁切或超出容器，而不是只認定填了 Padding 就一定沒有其他影響。
還原 Padding，再只增加 Margin
接著把 Padding Top 改回零，再把 Margin Top 設為二十四像素。這次模組頂部與標題頂部一起移到一百二十五點五九三七五像素，兩者仍貼著相同的起始位置；模組高度維持七十四點三二八一二五像素。
與前一步相比，這次移動的是模組盒在版面中的位置，沒有在盒內增加頂部留白。兩次畫面中的標題都往下二十四像素，但造成結果的方式不同。只看文字最後位置，很容易把兩個設定當成可互換。
這組測試使用的是當時 Divi 示範頁的佈局，不表示所有網頁中的 Margin 都會讓元素按數值一比一移動。一般 CSS 的佈局、外距折疊及父容器排列也會影響結果。處理實際頁面時，仍應檢查該容器的 Block、Flex 或 Grid 設定與相鄰內容。
兩個模組之間的距離，也可能來自 Gap
若兩個模組之間的空白在清除 Margin 後仍存在，查看父層 Layout 的 Gap。Divi 5 使用 Flex 佈局時，可由容器設定子元素之間的水平或垂直距離。這段距離不是某個 Text 的 Padding，也不一定是兩個模組各自的外距。
例如同一欄裡有標題、文字與按鈕，你想讓三者保持一致的間隔，可以先檢查父容器是否已有 Gap。若又在每個模組底部追加 Margin，最後距離可能疊加。先記錄現有值，再選擇由哪一層負責間隔，比同時保留多套距離更容易維護。
如果只有一個模組需要額外分開，可以用該模組的外距做局部調整；若所有子元素都需要一致間隔，則應考慮容器設定。選擇依據是你要控制的範圍，不是某個欄位看起來比較方便。
距離不對時，按順序找來源
先選定目標，核對 Spacing 的四個方向及目前裝置，再看父容器的 Padding、Gap 和排列。必要時查看瀏覽器計算樣式，找出最後生效的數值。不要一開始就用負 Margin 拉回來，因為原本多餘的內距或容器間隔仍然存在。
如果桌面正常、手機太空，檢查手機是否繼承了較大的桌面值，或曾留下局部覆寫。改動前先看 Responsive Editor 的狀態，不要同時重設整個 Spacing 群組，連原本正確的左右留白也一起清掉。
完成自己的測試頁調整後，儲存並退出 Visual Builder，確認文字與背景的關係、相鄰區塊距離，以及窄視窗下的高度。編輯框線會幫你選取元素，但一般訪客不會看到它；最後仍應以公開頁的閱讀效果判斷。
當你能指出這段空白是在盒內、盒外，還是子元素之間，就比較容易選對設定。先調整一個來源並看結果，再處理下一個，能避免把簡單的留白問題變成一串互相抵消的數值。
保留單位和修改方向
交接這類修改時，除了數字，也留下單位、方向與裝置。例如「手機 Text 頂部內距二十四像素」，比「留白加二十四」更明確。後者容易被理解成外距、左右內距，甚至全裝置一起修改。
若欄位原本使用百分比、rem 或設計變數，不要不看來源就改成 px。不同單位的計算依據不同，既有變數也可能用來維持整站節奏。先確認這次需要固定距離還是隨容器變化，再選單位，並檢查寬度改變後是否仍符合閱讀需求。
評論0