PageFly - Edit spacing (margin and padding)

600 views Linh 2

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

What are margin and padding?

All web elements have spacing attributes like these.

MarginThe spacing surrounding an element. It pushes other elements further away.
BorderA border that goes around the padding and content.
PaddingPadding is the spacing within an element. It pushes the content inside the element further in.
ContentThe content of the box.

To read more about margin and padding, check out this article by w3school.

How to edit margin and padding

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.

Commonly used cases

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 “RING 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. 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. 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.

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 “RING 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.

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.

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.

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.

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 Section > Styling 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.

Was this helpful?