编辑间距（边距和填充）

本視頻教程將幫助您了解有關使用外邊距和內邊距調整 PageFly 中的間距的更多信息。

在本文中，您將了解如何使用外邊距和內邊距來控制要素之間的間距。

關於外邊距和內邊距？

你可以在下面的视频查看更多信息

所有的網要素都有這樣的間距屬性。

要閱讀有關外邊距和內邊距的更多信息，您還可以查看此博客。

外邊距和內邊距配置

有兩種方法可以編輯內邊距和外邊距

使用檢查器

要編輯 PageFly 要素的外邊距和內邊距，首先，選擇要素 > 樣式標簽 > 間距模塊。

4 個空框允許您填寫 4 個邊的值：上 – 右 – 下 – 左。例如使用圖片要素。

當您在中間字段中添加一個數字時，相同的數字將應用於所有邊 – 頂部、右側、底部和左側。

使用外邊距和內邊距點

外邊距和內邊距也在編輯器中可視化。您可以拖動點來調整每個要素的間距。橙色點將用於編輯外邊距，綠色點將用於調整內邊距。右側屏幕上 4 個框中的外邊距和內邊距的值將相應更改。

常用事例

在進行具體步驟之前，您可以觀看此視頻以了解如何在 PageFly 中調整間距要素

事例 1：使用內邊距編輯要素內的間距

要編輯要素內的間距，請編輯其內邊距。在示例中，我們想將“SHOES COLLECTION”標題向下推一點，因此我們將頂部內邊距添加到容納標題的欄中。

選擇欄 > 樣式標簽 > 間距模塊 > 將 50像素添加到頂部內邊距。您還可以通過拖動欄的頂部綠點直到達到所需的間距來更改欄的內邊距。更改欄的內邊距或外邊距總是優先於每個要素的內邊距或外邊距。將來您可以更輕鬆地編輯佈局。

優化移動設計

首先，切換到移動視圖：導航到頂部欄 > 轉到設備切換器 > 選擇移動。

然後，選擇欄 > 樣式標簽 > 間距模塊或拖動橙色和綠色點，直到它們達到您想要的間距。你可以看到它有 50像素的頂部內邊距，這是我們設置為全視圖時添加的。

事例 2：使用外邊距編輯 2 個相鄰要素之間的間距

要編輯 2 個相鄰要素的間距，請編輯要素外邊距的一邊。

在此示例中，我們想將按鈕推離“SHOES COLLECTION”標題更遠的位置，因此我們將值添加到標題的下外邊距。

選擇標題要素 > 樣式標簽 > 間距模塊 > 將 45像素添加到下外邊距或拖動底部的橙色點，直到達到您想要的間距

下外邊距創建更多空間並將按鈕要素推離標題更遠。

優化移動設計

首先，切換到移動視圖：導航到頂部欄 > 轉到設備切換器 > 選擇移動。

然後，選擇標題 > 樣式標簽 > 間距模塊。你可以看到它有 45像素的下外邊距，這是在我們將其設置為全視圖時添加的。

由於移動設備上的空間比桌面設備小得多，您可能需要通過向 4 個框添加值來修改這些值，或者拖動橙色和綠色的點直到它們達到您想要的間距。

事例3：編輯左側/右側間距

要編輯要素左側/右側的間距，請使用“%”單位而不是“像素”，以便它可以響應不同的屏幕尺寸。

在示例中，我們想將段落移動到更靠近中心的位置，因此我們將值添加到容納該段落的模塊的右側內邊距和左側內邊距。

選擇模塊 > 樣式標簽 > 間距模塊 > 將 10% 添加到右側內邊距和左側內邊距。如果您使用畫布上的點來調整間距。

請注意，您應該先在右側的樣式標簽中將單位從“像素”更改為“%”。

優化移動設計

首先，切換到移動視圖：導航到頂部欄 > 轉到設備切換器 > 選擇移動。

然後，選擇模塊 > 樣式標簽 > 間距模塊。這些值是在我們將其設置為全視圖時添加的。

由於移動設備中的空間比桌面設備小得多，您可能需要通過將值添加到 4 個框來修改這些值，或者拖動橙色和綠色點直到達到您想要的間距。

事例 4：編輯行中列之間的間距

要編輯行中的欄間距，請選擇行 > 一般標簽 > 內容模塊 > 調整欄間距值。

優化移動設計

首先，切換到移動視圖：導航到頂部欄 > 轉到設備切換器 > 選擇移動。

然後，選擇行 > 一般標簽 > 間距模塊。可以看到平板的欄間距，移動也是30像素

由於移動設備中的空間明顯小於桌面設備，您可能需要修改此值。