How to Edit Spacing between PageFly Elements

About Margin And PaddingClick to copy

Summary: Margin and Padding are crucial elements in web design that control the spacing around and within elements, respectively. They help organize content and improve the visual layout of a webpage.

About spacing on websites, all web elements will have spacing attributes as demonstrated below.

margin padding

Margin The spacing surrounding an element. It creates the spacing from one element to another element of the same level (i.e. from a paragraph to a button)
Border A border that goes around the padding and content.
Padding The spacing inside an element/ container. It creates the spacing from the container’s edge to the elements inside it (i.e. from a section edge to a paragraph inside it)
Content The element inside the box/ container.

For a visual guide on how to set up Margin and Padding, watch this video tutorial:

How To Configure Margin And PaddingClick to copy

Legacy EditorClick to copy

If you use the basic editor of PageFly, check methods to edit spacing below:

Using Spacing On Styling tabClick to copy

To edit the margin and padding of an element:

  • Step 1: Select the element, then go to Styling tab > Spacing section.
  • Step 2: Change the values for each side of the padding setting.

There are 4 empty boxes where you can enter values for each of the four sides: top, right, bottom, and left.

For example:

How To Configure Margin And Padding

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

How To Configure Margin And Padding

Using Margin And Padding DotsClick to copy

Note: The margin and padding dots are only available for container elements, including Section, Row, Column, and Block element.

  • Step 1: Choose the element
  • Step 2: Drag the dots on the editor canvas to adjust the spacing of each element.

The orange dot is used to edit margin, and the green dot is for padding. The value of margin and padding on the Styling tab will change accordingly.

How To Configure Margin And Padding

Gen 2 EditorClick to copy

There are 2 ways to edit margin and padding in the flex editor of PageFly:

Using Spacing On Styling tabClick to copy

To edit the margin and padding of an element:

  • Step 1: Select the element, then go to Styling tab > Spacing section.
  • Step 2: Change the values for each side of the padding/margin setting.

There are 4 empty boxes where you can enter values for each of the four sides: top, right, bottom, and left.

For example:

How To Configure Margin And Padding

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

How To Configure Margin And Padding

Adjust Margin And Padding Area On Page CanvasClick to copy

  • Step 1: Choose the element
  • Step 2: Hover on the margin/padding area
  • Step 3: Extend and shrink the area to adjust the spacing of each element.

The orange area is used to edit margin, and the green area is for padding. The value of margin and padding on the Styling tab will change accordingly.

How To Configure Margin And Padding

Commonly Used CasesClick to copy

Note: Change in spacing on mobile view mode will be reflected on mobile view only, and will not affect settings on All Devices or any other view mode.

Case 1: Create Spacing Inside A ContainerClick to copy

All Devices ModeClick to copy

To create spacing inside a container, you need to adjust its padding. For example, in order to push the “Mother’s Day” heading down a little bit, we will add top padding to that heading element..

Step 1: Select the element you want to edit, then go to the Styling tab > Spacing section.
Step 2: Add padding to the top (e.g., 50 pixels) to increase the space inside the container.

How To Configure Margin And Padding

The top padding increases the space between the top edge of the container and its child elements, pushing those child elements downward.

Mobile ModeClick to copy

To optimize spacing for mobile design:

  • Step 1: Switch to mobile view by navigating to the top bar > go to Device switcher > choose Mobile.
  • Step 2: Select the element, then go to the Styling tab > Spacing section to adjust the padding.

The padding set in “All Devices” mode (e.g., 50px) will be inherited automatically from our settings in All Devices view. Adjust it to make sure it looks good on mobile devices.

How To Configure Margin And Padding

Case 2: Create Spacing Underneath An ElementClick to copy

All Devices ModeClick to copy

To create the spacing of 2 neighbor elements, edit the side margin of an element.

For example, in order to push the paragraph element further away from the “Mother’s Day” heading, we will add value to the bottom margin of the heading.

  • Step 1: Select the Heading element, then go to Styling tab > Spacing section,
  • Step 2:  Add margin to the bottom (e.g., 50px) to increase space between the selected element and the one below it.

How To Configure Margin And Padding

The bottom margin creates more space at the bottom, and pushes the paragraph element further away from the heading.

Mobile ModeClick to copy

To optimize spacing for mobile design,

  • Step 1: switch to mobile view by navigating to the top bar > go to Device switcher > choose Mobile.
  • Step 2: select the Heading element, then go to Styling tab > Spacing section to adjust the value. You can see that it already has a gray number of 50px for bottom margin, which is automatically inherited from our settings in All Devices view.

How To Configure Margin And Padding

Case 3: Create Spacing On The Left – Right Sides Of An ElementClick to copy

All Devices ModeClick to copy

To create spacing on the left or right side of an element, you need to adjust the left or right margin of that element. You can use the default “px” (pixel) unit or the “%” unit for a more responsive design across different screen sizes.

For example, to move the “Add To Cart” button further away from the “Product Quantity” you would increase the right margin of the “Product Quantity” element.

  • Step 1: Select the “Product Quantity” element, then go to the Styling tab > Spacing section.
  • Step 2: Add 16px to the right margin box.

How To Configure Margin And Padding

The right margin creates more space on the side, pushing the “Add To Cart” button further away from the “Product Quantity.”

Mobile ModeClick to copy

To optimize spacing for mobile design:

  • Step 1: Switch to mobile view by navigating to the top bar > Device switcher > choose Mobile.
  • Step 2: Select the “Product Quantity” element, then go to the Styling tab > Spacing section to adjust the value. You’ll notice a gray number of 16px for the right margin, inherited from the All Devices view settings. Adjust this value as needed for optimal mobile layout.

How To Configure Margin And Padding

Case 4: Edit Spacing Between Columns In The Same RowClick to copy

All Devices ModeClick to copy

If you use  the basic editor of PageFly, you can adjust the spacing between columns in a row by modifying the Columns Spacing value of the Row element.

For example, to create more space between columns in a row, you would increase the Columns Spacing value.

  • Step 1: Select the Row element, then go to the General tab > Content section.
  • Step 2: Adjust the Columns Spacing value to create more space between the columns.

The Column Spacing value increases the distance between columns in the same row, pushing them further apart.

How To Configure Margin And Padding

Mobile ModeClick to copy

To optimize column spacing for mobile design:

  • Step 1: Switch to mobile view by navigating to the top bar > Device switcher > choose Mobile.
  • Step 2: Select the Row element, then go to the General tab > Content section > Column Spacing to adjust the value. Adjust this value as needed to ensure proper spacing between columns on mobile devices.

How To Configure Margin And Padding

Frequently Asked QuestionsClick to copy

1. What’s the difference between margin and padding?

Margin refers to the space outside of an element, between it and other elements. Padding refers to the space inside an element, between its content and its border.

2. What units can I use for margin and padding values?

You can use pixels (px), emphasis (em) or percentages (%) for margin and padding values in PageFly.

3. Why would I add padding inside a container instead of margin?

Adding padding inside a container pushes its child elements inward, while adding margin pushes external elements away from the container.

How to Use Element Inspector in PageFly Page Editor

Element Toolbar Main Functions | PageFly Page Editor

Thank you for your feedback!

Navigate this category

Could not find the answer
to your question?

Chat with us
Great news! PageFly Help Center is now available in Japanese 🇯🇵. Explore now by switching the language in the Header section ☝️