由於暫時基礎的 WordPress《區塊編輯器》並沒有提供 CSS 的「Margins 邊界」和「Padding 邊距」的相關參數設定， 導致在控制不同元素和物件時會帶來一些不便。例如最常見就是段落之間的間距，一般我們希望提供一些留白空間，讓讀者知道段落和句子的開始點和完結點在那，不然長篇文章會堆疊在一起，影響文章的可讀性和結構性會變得較差。讓我們一起研究如何使用「空白間隔區塊」去讓不同段落差生明顯的區隔和留白。

如何新增空白間隔 Spacer Block (方法一)？

如何新增空白間隔 Spacer Block (方法一)？
如何新增空白間隔 Spacer Block (方法一)？

步驟一：

在新段落區塊中輸入 /空白間隔 並按下 Enter 鍵，以快速新增空白間隔區塊。

步驟二：

點擊「空白間隔」區塊即可。

如何新增空白間隔 Spacer Block (方法二)？

如何新增空白間隔 Spacer Block (方法二)？
WordPress 空白間隔區塊 | 調整空間感和留白

步驟一：

在右下方點擊 [+] 符號。

步驟二：

在彈出視窗裡的輸入欄位，輸入「空白間隔」字串。

步驟三：

發現「空白間隔」區塊，請按圖示即可。

空白間隔區塊標準外觀

空白間隔區塊標準外觀
WordPress 空白間隔區塊 | 調整空間感和留白

雖然空白間隔區塊在真實世界裡是「透明」的，但在編輯後台會以一塊灰色的色塊存在，方便你調整它的高度和相關設定。

調整留白空間的高度

調整留白空間的高度
調整留白空間的高度

預設的高度約 100 像素，如果你希望調整更高或更低，可以按著區塊中央的「白點」，並按著滑鼠左鍵不放，向上或向下滑動捲軸即可輕鬆調整高度。

在轉換模式之下，選取「群組」區塊

在轉換模式之下，選取「群組」區塊
在轉換模式之下，選取「群組」區塊

空白間隔是一種比較特殊的功能性區塊，所以可以提供轉換的區塊選擇比較少，當中比較實用是轉換為「群組」區塊之後的應用。

在「群組」區塊之下可改變背景色彩

在「群組」區塊之下可改變背景色彩
在「群組」區塊之下可改變背景色彩

原本的空白間隔區塊無法調整背景色彩，轉換為群組之後，我們還可以在區塊上方輸入字句，你可以在右方的「區塊設定」區塊調整文字和背景危彩。

在空白間隔設定調整高度

在空白間隔設定調整高度
在空白間隔設定調整高度

這個區塊很簡單，所以能夠提供的調整選項很少，不過對於排版很重要。

步驟一：

拉動控制點可以調整區塊高度，這裡的單位是 (像素 px)。

步驟二：

在右方會發現可以輸入的欄位，輸入「數值」即可。

HTML 錨點和調整附加的 CSS 類別

HTML 錨點和調整附加的 CSS 類別
HTML 錨點和調整附加的 CSS 類別

標題區塊裡的「HTML 錨定」是一個建立頁面躍點的實用工具，如果將區塊切換至其 HTML 檢視，你會發現系統以 CSS ID 的形式將「HTML 錨點」輸入內容新增至標題標籤。你也會在區塊 HTML 中看到 CSS 類別。

進階面板讓你將 CSS 類別新增至區塊，以便編寫自訂 CSS，並視需要設定區塊樣式，建議具備 CSS 程式碼的基本知識後再使用此功能。

常見問題 FAQ

什麼是 WordPress 空白間隔區塊？

為了區間和分隔不同的段落和網頁物件，這需要一個透明而彈性的調整物件去擔任這個角色，除了載入快速和設定簡單，讓讀者閱讀文章時比較舒服。

如何改變空白間隔區塊的色彩？

預設上這區塊是透明而不帶任何色彩，但你可以透過轉換它的特性為「群組」，從而變更文字和背景色彩。

參考資料和引用文獻：

學員人數：5,500+ 人（持續增加之中）

前往免費的學習社團
中文語系的 WordPress - Facebook 社團列表