Margin, Padding, Spacing & Positioning Overview

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.

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.