About Margin and Padding?
In this article, you will learn how to edit spacing between PageFly Element by using margin and padding.
About spacing on websites, all web elements will have spacing attributes as demonstrated below.
| 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. |
To read more about margin and padding, you can also check out this blog.
Margin and Padding Configuration
You can check this video for more visualize in how to configure for Margin and Padding in PageFly:
There are 2 ways to edit padding and margin:
Using Spacing on Styling tab
To edit the margin and padding of an element, select the element, then go to Styling tab > Spacing section.
There are 4 empty boxes where you can enter values for each of the four sides: top, right, bottom, and left. The central box enables you to input a single value that will apply to all four sides simultaneously.
For example:
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 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.
Commonly Used Cases
Case 1: Create Spacing Inside A Container
To create the spacing inside a container, edit its padding.
For example, in order to push the “Modern Carpet” heading down a little bit, we will add top padding to the column that contains the heading.
To do that, select the Column element, then go to Styling tab > Spacing parameter and add value to the top padding (for instance, 50 pixels).
You can also change the padding of the column by dragging the top green dot of the column until it reaches the spacing you want.
The top padding creates more space from the top edge of the column to its child element, and pushes the child elements downward.
To optimize spacing for mobile design, first, please switch to mobile view by navigating to the top bar > go to Device switcher > choose Mobile.
Then, select the Column 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 top padding, which is automatically inherited from our settings in All Devices view.
You can also drag the orange and green dots until they reach the spacing you want.
Change in spacing on view mode will be reflected on mobile view only, and will not affect settings on All Devices or any other view mode.
Case 2: Create Spacing Underneath An Element
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 “Modern Carpet” heading, we will add value to the bottom margin of the heading.
To do that, select the Heading element, then go to Styling tab > Spacing section, and add 16px to the bottom margin box.
The bottom margin creates more space at the bottom, and pushes the paragraph element further away from the heading.
To optimize spacing for mobile design, first, please switch to mobile view by navigating to the top bar > go to Device switcher > choose Mobile.
Then, 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 16px for bottom margin, which is automatically inherited from our settings in All Devices view.
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 3: Create Spacing On The Left – Right Sides Of An Element
To create the spacing on the left/right sides of an element, add value to the left/ right margin of that element.
You can either use the default “px” (pixel) unit, or use the “%” unit instead so it can be responsive on different screen sizes.
For example, in order to push the Add To Cart button further away from the Product Quantity, we will add value to the right margin of the Product Quantity.
To do that, select Product Quantity, then go to Styling tab > Spacing section, and add 16px to the right margin box.
The right margin creates more space on the side, and pushes the Add To Cart button further away from the Product Quantity.
To optimize spacing for mobile design, first, please switch to mobile view by navigating to the top bar > go to Device switcher > choose Mobile.
Then, select the Product Quantity, then go to Styling tab > Spacing section to adjust the value. You can see that it already has a gray number of 16px for right margin, which is automatically inherited from our settings in All Devices view.
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 4: Edit Spacing Between Columns In The Same Row
To edit the spacing for columns in a row, select the Row element, then go to General tab > Content section > adjust Columns Spacing value.
The Column Spacing value creates more space between columns of the same row, and pushes them further away from each other.
To optimize spacing for mobile design, first, please switch to mobile view by navigating to the top bar > go to Device switcher > choose Mobile.
Then, select the Row element, then go to General tab > Content section > Column Spacing to adjust the value.
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.
Frequently Asked Questions
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.
