Edit spacing (margin and padding)

This video tutorial will help you understand more about using Margin and Padding to adjust the spacing in PageFly. 

Install PageFly for Free here

And in this article, you will learn how to control the spacing between elements with margin and padding.

About margin and padding?

You can check more details in the video tutorial below.

All web elements have spacing attributes like these.

To read more about margin and padding, you can also check out this blog.

Margin and padding configuration

There are 2 ways to edit padding and margin

Using Inspector

To edit the margin and padding of a PageFly element, first, select the element > Styling tab > SPACING section.

The 4 empty boxes allow you to fill in the value for 4 sides: top – right – bottom – left. For example with the Image element.

When you add a number in the middle field, the same number will be applied to all the sides – top, right, bottom, and left.

Using margin and padding dots 

Margin and padding are also visualized in the editor. You can drag dots to adjust the spacing of each element. The orange dot will be used to edit margin and the green dot will be used to adjust padding. The value of margin and padding in the 4 boxes on your right screen will change accordingly.

Commonly used cases

Before going to the specific steps, you can watch this video to know how to adjust spacing element in PageFly

Case 1: Edit spacing inside an element by using padding

To edit the spacing inside an element, edit its padding. In the example, we want to push the “SHOES COLLECTION” heading down a little bit, so we add top padding to the column that contains the heading.

Choose Column > Styling tab > SPACING section > add 50px to top-padding. You can also change the padding of column by dragging the top green dot of the column until it reaches the spacing you want. The change to padding or margin of a Column is always preferred over the padding or margin of each element. It will be easier for you to edit the layout in the future.

Optimize mobile design

First, switch to mobile view: Navigate to the top bar > go to Device switcher > choose Mobile.

Then, select the Column > Styling tab > SPACING section or drag the orange and green dots until they reach the spacing you want. You can see that it has 50px for top-padding, which has been added when we set it to the All view

Since space on mobile devices is significantly smaller than desktop, you might want to modify these values by adding values to the 4 boxes or drag the orange and green dots until they reach the spacing you want.

Case 2: Edit spacing between 2 neighbor elements by using margin

To edit the spacing of 2 neighbor elements, edit a side’s margin of an element.

In this example, we want to push the button farther from the “SHOES COLLECTION” heading, so we add values to the bottom-margin of the heading.

Choose the Heading element > Styling tab > SPACING section > add 45 px to the bottom-margin or drag the bottom orange dots until it reaches the spacing you want

The bottom margin creates more space and pushes the button element farther from the heading.

Optimize mobile design

First, switch to mobile view: Navigate to the top bar > go to Device switcher > choose Mobile.

Then, select the Heading > Styling tab > SPACING section. You can see that it has 45px for the bottom-margin, which has been added when we set it to All view.

Since the space on mobile devices is significantly smaller than desktop, you might want to modify these values by adding values to the 4 boxes or drag the orange and green dots until they reach the spacing you want.

Case 3: Edit spacing on left / right sides

To edit the spacing on the left/right sides of an element, use the “%” unit instead of “pixel” so it can be responsive on different screen sizes.

In the example, we want to move the paragraph closer to the center, so we add values to the right-padding and left-padding of the section which contains the paragraph.

Choose the Section > Styling tab > SPACING section > add 10% to the right-padding and left-padding. If you use dots on the canvas to adjust the spacing. 

Please note that you should change the unit from “pixel” to “%” in the styling tab on your right first.

Optimize mobile design

First, switch to mobile view: Navigate to the top bar > go to Device switcher > choose Mobile.

Then, select the Section > Styling tab > SPACING section. These values are added when we set it on All view.

Since space in mobile devices is significantly smaller than desktop, you might want to modify these values by adding values to the 4 boxes or drag the orange and green dots until they reach the spacing you want.

Case 4: Edit spacing between columns in the row

To edit the spacing for columns in a row, select the Row > General tab > CONTENT section > adjust Columns Spacing value.

Optimize mobile design

First, switch to mobile view: Navigate to the top bar > go to Device switcher > choose Mobile.

Then, select the Row > General tab > SPACING section. You can see the Columns Spacing of Tablet, and Mobile is also 30 px

Since space in mobile devices is significantly smaller than desktop, you might want to modify this value.