编辑间距(边距和填充)

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

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

關於外邊距和內邊距?Click to copy

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

外邊距要素周圍的間距。它將其他要素推得更遠
邊框圍繞內邊距和內容的邊框。
内边距內邊距是要素內的間距。 它將要素內部的內容進一步推入。
內容框的內容。

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

外邊距和內邊距配置Click to copy

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

使用檢查器Click to copy

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

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

spacing

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

使用外邊距和內邊距點Click to copy

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

spacing

常用事例Click to copy

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

事例 1:使用內邊距編輯要素內的間距Click to copy

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

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

spacing

優化移動設計Click to copy

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

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

spacing

事例 2:使用外邊距編輯 2 個相鄰要素之間的間距Click to copy

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

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

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

spacing

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

優化移動設計Click to copy

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

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

spacing

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

事例3:編輯左側/右側間距Click to copy

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

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

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

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

spacing

優化移動設計Click to copy

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

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

spacing

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

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

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

spacing

優化移動設計

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

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

spacing

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

Thank you for your feedback!

Navigate this category

PreviousPrevious article

Next articlePrevious

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese. Please check the flags on the page header.

I got it!
Join PageFly Facebook Group to get Bearie Coin JOIN US NOW