空白（邊距和填充）

您可以在「樣式」面板中為每個元素指定內部和外部的空白（邊距和填滿）。

透過本教程，您將掌握：

1. 將空格合併到元素中的技術
2. 修改空白單元的方法
3. 有效利用負邊際
4. 應用自動邊距使元素水平居中
5. 偵測並修復相鄰元素之間的邊距問題

將空格注入元素的方法

空白充當元素邊界外部（邊距）或內部（填充）的視覺呼吸空間 - 您可以選擇單獨調整不同邊上的空白，作為邊對或同時調整所有邊。

整合各個側面的空白

當您只想在元素的一側添加邊距或填充時：

1. 直接在畫布上選擇元素
2. 將內邊距或邊距控制器拖曳到要修改的一側

您也可以從預先定義的空白值中進行選擇或手動調整填滿和邊距：

1. 選擇邊距或填滿控制器
2. 透過點擊或輸入自訂值來選擇預先定義的空白值

在互補側整合空白

若要變更互補（相對）邊上的間距：

1. 抓住 選項 （在 Mac 上）或 替代 （在 Windows 上）
2. 調整邊距/填滿控制器之一，選擇預先定義的空白值，或插入自訂值

將所有邊上的空白整合在一起

您可以透過按下將相同的值統一應用於元素的所有側面 轉移 並調整單側的填滿/邊距。或者，當持有 轉移，按一下一側的空白控制器，選擇預先定義值或輸入自訂值。

修改空白單元的不同選項

預設情況下，用於空白的單位是像素 (px)，但您可以將其切換為單位選單中顯示的任何單位。若要存取此選單，請按一下任一空白控制器並在輸入欄位右側選擇適當的單位（例如，PX、%、EM、VW 或VH）。

您也可以在輸入欄位中手動輸入值和單位。如果您希望所有側面使用相同的單位，請點擊一側的空白控制器，然後按 轉移，輸入所需的單位，然後點選 進入.

了解有關輸入值和單位的更多資訊。

清除空白值

透過按住控制器上的藍色值來擦除任意一側的空白值 替代 （在 Mac 上）或 選項 （在 Windows 上）。

利用負保證金

向元素引入負邊距會將其從頁面上的預設位置移動。使用負值（例如-100）允許元素重疊。

利用自動邊距使元素水平居中

自動邊距設定被證明是一種有用的佈局方法，可以精確對齊 Flex 項目。例如，當使用 flex 處理父元素中的多個按鈕時，您可以在右側和左側實現自動邊距，將這些按鈕放置在父元素的中心，從而在它們之間均勻分配剩餘空間。

元素的水平居中可以透過利用 中心元素按鈕 在裡面 風格面板 > 空白。此按鈕將元素的左右邊距配置為自動，保持顯示屬性不變。邊距將自動佔據可用空間。

了解有關 Flex 自動邊距技術的更多資訊。

提醒： 由於內聯設定中缺少水平空間，因此使用內聯（內聯區塊）顯示屬性的元素無法使用「中心元素」按鈕（自動邊距）居中。

如何解決相鄰元素之間的邊距問題

某些情況會導致相鄰元素邊距合併以建立統一的邊距。這被稱為邊距折疊，可能會導致混亂，因為它在某些情況下可能會被覆蓋，而在其他情況下則不會。相鄰網格子項的邊距不會塌陷。

當頁腳內容在設計器中不可見且無法存取時，就會出現一個常見問題。當導航欄絕對定位時，通常會發生這種情況，將內容推到頁面底部的 Body 元素之外。為了防止這種情況，如果頁面上的初始元素缺乏固定位置，請避免為其添加上邊距。相反，請在 Body 元素上添加頂部內邊距。

了解有關邊距折疊的更多信息.