How to Use Padding and Margins to Structure Your Page

Padding and margins help define the spacing and positioning of elements, columns, and rows on a webpage. Understanding how to use them properly allows for better layout control and design flexibility.

1. Accessing Padding and Margin Settings

1. Select an element (e.g., text, image, button, or column).
2. In the options toolbar, click on the settings icon.
3. Navigate to the Styling tab on the right sidebar.
4. The first two options under Basic Styling are Padding and Margins.

2. Understanding Padding

• Padding adds space between the content and the boundary of an element (inside spacing).
• By default, padding is linked, meaning all sides will have equal spacing.
• To adjust padding:
• Increase the value to create more space around the content.
• Unlink it to set different values for each side (top, right, bottom, left).
• Values can be entered in pixels (px) or percentages (%).

Example: Adding 20px padding around a text element will create space between the text and its container.

3. Understanding Margins

• Margins control the space between different elements on the page (outside spacing).
• Unlike padding, margins affect how elements are positioned relative to each other.
• To adjust margins:
• Increase the top margin to push an element further down.
• Increase the bottom margin to add space below the element.
• Decrease the margin to bring elements closer together.

4. Using Negative Margins for Overlap Effects

• Negative margins allow elements to overlap with other sections, creating unique layouts.
• To create an overlap effect:
• Select an element and decrease its top margin by dragging the slider left.
• The element will move upward, overlapping the section above it.

Example: Applying -50px top margin to an image can make it overlap with the text above.

5. Adjusting for Responsive Design

• Padding and margins should be fine-tuned for desktop, tablet, and mobile views.
• Switch to tablet and mobile view in the editor and adjust spacing accordingly.
• Ensure that text and elements do not become too compressed or too far apart on smaller screens.

By using padding and margins effectively, you can create well-structured, visually appealing layouts that adapt to different screen sizes.