Margin

Margin controls the empty space outside of an element, creating distance between it and adjacent elements.

Step-by-Step Guide

1. Select the Element:
   • In the visual editor, click on the element (e.g., a Container, Image, Button, or Section) for which you want to adjust the spacing
   • The element will be highlighted, and its settings will appear in the right-hand panel under Component Settings.
2. Locate the Margin Controls:
   • In the Component Settings panel on the right, scroll down to the MARGIN section.
   • This section will have four input fields, represented by square icons, corresponding to the four sides of the element:
     • Top Margin
     • Right Margin
     • Bottom Margin
     • Left Margin
3. Adjust the Margin:
   • Click and drag the slider next to the margin you want to adjust, or click on the input field and enter a numerical value (in pixels).
   • Top Margin: Dragging the top margin slider (e.g., from 0 to 97) increases the space above the selected element, pushing it down the page
   • Bottom Margin: Adjusting the bottom margin slider (e.g., from 0 to 87) increases the space below the element, pushing the next element further down
   • Left/Right Margin: Adjusting the side margins controls the empty space to the left or right of the element. For example, setting a right margin (e.g., to 147) pushes the element further left within its parent container, and a left margin (e.g., to 113) pushes it to the right