About Margin And Padding
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 | 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 Padding
Legacy Editor
If you use the basic editor of PageFly, check methods to edit spacing below:
Using Spacing On Styling tab
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:
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
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.
Gen 2 Editor
There are 2 ways to edit margin and padding in the flex editor of PageFly:
Using Spacing On Styling tab
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:
When you add a number in the middle field, the same number will be applied to all the sides – top, right, bottom, and left.
Adjust Margin And Padding Area On Page Canvas
- 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.
Commonly Used Cases
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 Container
All Devices Mode
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.
The top padding increases the space between the top edge of the container and its child elements, pushing those child elements downward.
Mobile Mode
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.
Case 2: Create Spacing Underneath An Element
All Devices Mode
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.
The bottom margin creates more space at the bottom, and pushes the paragraph element further away from the heading.
Mobile Mode
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.
Case 3: Create Spacing On The Left – Right Sides Of An Element
All Devices Mode
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.
The right margin creates more space on the side, pushing the “Add To Cart” button further away from the “Product Quantity.”
Mobile Mode
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.
Case 4: Edit Spacing Between Columns In The Same Row
All Devices Mode
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.
Mobile Mode
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.
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.
Previous article
