PageFly - Edit spacing (margin and padding)

132 views Anh 1

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

What is margin and padding?

All web element has a spacing attributes like this.

Explain margin and padding

Margin The spacing surrounding an element. It pushes other elements further away.
Border A border that goes around the padding and content.
Padding Padding is the spacing within an element. It pushes the content inside the element further in.
Content The 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 > Box Styles section.

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

Example of margin and padding of a section

Important: The connected chain icon denotes that all 4 values for 4 positions are synced. For example, when you fill 15px in top-margin, all other margin boxes receive the value of 15px too.

To turn off this feature, dechain it.

Example of margin and padding

This is a complete example of a section with margin, padding.

  • The margins for all four sides are 60px, outside the orange border.
  • The paddings for all four sides are 10px, inside the orange border.
  • The border itself has 15px of thickness.

Example of margin and padding of a section

Commonly used cases

Case 1: Spacing inside an element using padding

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

Choose Column > Styling tab > Box Styles section > add 50px to top-padding. The change of padding or margin of 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.

Spacing inside an element

Optimize mobile design

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

Select the Column > Styling tab > Box Styles section. You can see that it has 50px for top-padding. The value of 50px is added when we set it on All view.

Important: When a fixed value is set in All view, it will be applied to all other views (laptop, tablet and mobile) and makes the design not responsive by default anymore.

Spacing inside an element mobile

If you don’t like this padding on mobile, simply set the value back to “0”, or “auto” > hit Save.

Case 2: Spacing between 2 neighbor elements

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

In the example, we want to push the button farther from the “WILDLIFE RESERVATION ORGANIZATION” heading, so we add values to the bottom-margin of the heading.

Choose the Heading element > Styling tab > Box Styles section > add 45 px to the bottom-margin. Alternatively, this spacing can also be achieved by edit the top-margin of the button element.

Spacing between 2 neighbor elements

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.

Select the Heading > Styling tab > Box Styles section. You can see that it has 45px for the bottom-margin. The value of 45px is added when we set it on All view.

Important: When a fixed value is set in All view, it will be applied to all other views (laptop, tablet and mobile) and makes the design not responsive by default anymore.

Spacing between 2 neighbor elements

If you don’t like this margin on mobile, simply set the value back to “0”, or “auto” > hit Save.

Case 3: Spacing on both sides

To edit the spacing on both sides of an element, use “%” unit instead of “pixel” so it can go responsive nicely 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 > Box Styles section > add 10% to the right-padding and left-padding.

Spacing on both sides

This method comes in handy when you want to set unequal spacing on 2 sides of the element.

Optimize mobile design

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

Select the Section > Styling tab > Box Styles section. You can see that it has “10%” value for left-padding and right-padding. These values are added when we set it on All view.

Important: When a fixed value is set in All view, it will be applied to all other views (laptop, tablet and mobile) and makes the design not responsive by default anymore.

Spacing on both sides

If you don’t like these paddings on mobile, simply set the padding values back to “0”, or “auto” > hit Save.

Case 4: Spacing between columns in the row

To edit the spacing for columns in a row, select the Row > General tab > Settings section > adjust Gutter value.

Spacing between columns in the row