编辑间距(边距和填充)

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

什么是边距和填充?Click to copy

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

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

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

如何编辑边距和填充Click to copy

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

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

edit spacing

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

常用案例Click to copy

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

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

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

针对移动设备优化设计Click to copy

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

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

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

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

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

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

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

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

针对移动移动设备优化设计Click to copy

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

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

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

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

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

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

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

针对移动移动设备优化设计Click to copy

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

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

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

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

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

edit spacing 2

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

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

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

edit spacing pagefly

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

Thank you for your feedback!

Navigate this category

PreviousPrevious article

Next articlePrevious

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

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

I got it!