Margin, Padding, Spacing & Positioning Overview

These concepts are essential settings used to enhance the spacing between elements in web design. By mastering these tools, you can create visually appealing and user-friendly layouts for your store.

1. Margin & Padding

Margin is the space outside an element’s border, creating distance between that element and adjacent ones. It can be adjusted for the top, right, bottom, and left sides, allowing for control over the layout and visual separation.

Padding, on the other hand, is the space inside an element’s border, acting as a cushion between the content and the edges. Like margins, padding can be adjusted for each side, ensuring that content does not touch the element’s borders.

For example, if you want to change the position of the button or increase the padding spacing, simply adjust the values in the outer and inner squares according to your needs.

2. Spacing

Spacing refers to the adjustments made to control the gaps and overall distance between various elements on a page.

For example, In the Row element, spacing settings can be utilized to set the column gaps. By adjusting the spacing, you can control the distance between the columns, ensuring that the layout appears balanced and visually appealing.

3. Position

Position settings in GemPages is an important attribute for positioning elements on a web page. This attribute allows you to control how an element is positioned on a web page using different values.

You can set up an element in 5 positions:

Static: The default value for elements, and cannot be positioned using the top, bottom, left, or right attributes.

Relative: If Static is the default way to display an element’s position, then Relative is the way to display its relative position. The initial position will still occupy a space on the page.

Absolute: the position of an element relative to the nearest scrolling parent element.

Fixed: the position of an element relative to the viewport.

Sticky: the position of an element relative to its parent element.

Overall, mastering position settings in GemPages allows you to create dynamic layouts that enhance the user experience while maintaining a visually appealing design.

4. Example: Setting Up “Position: Relative” in GemPages for a Landing Page

Scenario: You’re designing a landing page to promote a new product. You want to overlay a “Limited Time Offer” badge on top of the product image but slightly offset it to the right and downwards. To achieve this, you’ll use the “Position: Relative” setting in GemPages.

Following these steps: 

1. Add the Product Image Element:

• Drag and drop the Product Image element onto your landing page where you want it to appear.

2. Add the Product Badge Element:

• Next, add a Text or Image element (depending on your design) to serve as the “Limited Time Offer” badge.

3. Set Up Positioning:

Step 1: Click on the badge element to select it.

Step 2: In the right-hand panel, go to the Position settings.

Step 3: Change the position from the default to Relative.

4. Adjust the Positioning:

Step 1: With “Position: Relative” selected, you can now fine-tune the badge’s placement relative to its original position.

Step 2: Use the Top and Left/Right settings to nudge the badge slightly to the right and downward, so it appears partially overlaid on the product image.

Step 3: For example, you might set Top: -20px and Right: -20px to create the desired effect.