编辑间距(边距和填充)

您可通过本文学习如何使用边距和填充工具控制元素之间的间距。

什么是边距和填充?

所有网页元素都具有此类的间距属性。

边距元素周围的间距。可拉开与其他元素的间距。
边框围绕在填充和内容的周围。
填充填充是元素内的间距。 它将元素内的内容间距缩小。
内容盒子内的内容

了解更多有关边距和填充的信息,请查看这篇文章

如何编辑边距和填充

编辑PageFly元素的边距和填充,请首先选择该元素>“样式”选项卡>“间距”部分。

右边4个空白框可让您分别填值:顶部-右侧-底部-左侧。 例如,使用Image元素。

edit spacing

在中间字段中添加数字时,相同的数字将应用于所有面-顶部,右侧,底部和左侧。

常用案例

案例1:通过填充来编辑元素内的间距

填充可编辑元素内部的间距。 在该示例中,我们想将“ RING COLLECTION”的标题向下拖一点,这样我们就在含该标题的列中添加了顶部填充。

选择“列”>“样式”选项卡>“间距”>顶部填充添加50px。我们建议您 相较于编辑元素的填充和边距,始终首选列的填充和边距。 这样以后您就可以更轻松地编辑整个布局。

针对移动设备优化设计

首先,切换到移动设备/手机视图:导航到顶部栏>转到“设备切换器”>选择“移动设备(手机)”。

然后,选择列>样式标签>间距。 您会看到它有50px的顶部填充,且当设置全局视图时已添加。

由于移动设备上的空间比台式机小得多,因此您可能需要修改这些值。

案例2:使用边距编辑2个相邻元素之间的间距

要编辑2个相邻元素的间距,请编辑元素的边距。

在此示例中,我们想将按钮与“ RING COLLECTION”标题更远,因此我们在标题的底边距上添加值。

选择“标题”元素>“样式”选项卡>“间距”>在底边添加45像素。

底部边距创造了更多空间,并将加大了按钮元素与标题的间距。

针对移动移动设备优化设计

首先,切换到移动设备/手机视图:导航到顶部栏>转到“设备切换器”>选择“移动设备/手机”。

然后,选择“标题”>“样式”选项卡>“间距”。 您可看到其底边距为45像素,且当设置全局视图时已添加。

由于移动设备/手机上的空间比台式机小得多,因此您可能需要修改这些值。

案例 3: 编辑左右两侧的间距

要编辑元素左侧/右侧的间距,请使用“%”而不是“ 像素(pixel)”,这样页面即可适应不同屏幕尺寸。

在示例中,我们想将段落移到更靠近中心的位置,因此我们在包含该段落的部分的右填充和左填充上添加值。

选择“模块”>“样式”选项卡>“间距”>将10%添加到右填充和左填充。

针对移动移动设备优化设计

首先,切换到移动设备视图:导航到顶部栏>转到“设备切换器”>选择“移动设备/手机”。

选择“模块”>“样式”选项卡>“间距”。>将10%添加到右填充和左填充。 这些值且当设置全局视图时已添加。

由于移动设备/手机上的空间比台式机小得多,因此您可能需要修改这些值。

案例4: 编辑4行里,列之间的间距

要编辑行中列的间距,请选择“行”>“常规”选项>“内容”模块>调整“列间距”值。

edit spacing 2

针对移动设备/手机优化设计

首先,切换到移动设备视图:导航到顶部栏>转到“设备切换器”>选择“移动设备”。

然后,选择“模块”>“样式”选项卡>“间距”。 您可以看到平板和手机的列间距都是30像素。

edit spacing pagefly

由于移动设备/手机上的空间比台式机小得多,因此您可能需要修改这些值。

Navigate this category

PreviousPrevious article

Next articlePrevious

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

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

I got it!