How to Use Global Spacing & Borders

Global Spacing & Borders gives you full control over the spacing and border settings across different elements on your website. With these settings, you can ensure a consistent and well-structured layout for all Stackable blocks.

Applying Spacing & Borders

You can apply spacing and borders to specific elements, including:

• Margins
• Columns
• Background & Containers
• Images

Additionally, you can adjust spacing and border settings separately for desktop, tablet, and mobile to make sure your design looks great on any device. Just click on the desktop icon next to any setting and select which screen you want to adjust the setting for.

Column Spacing Options

For columns, you can customize:

• Inner Column Spacing – Adjusts spacing within each column.
• Column Gap – Controls the space between columns.
• Row Gap – Defines the spacing between rows.

Background & Container Spacing Options

For backgrounds and containers, you can modify:

• Padding – Adjust the inner spacing within the container.
• Borders – Add borders around the container.
• Border Width – Control the thickness of the border.
• Border Radius – Round the corners of the container.
• Shadow / Outline – Add visual depth with shadows or outlines.

Image Styling Options

For images, you can adjust:

• Border Radius – Round the corners of the image.
• Shadow / Outline – Add depth or emphasis to images.

Resetting to Default

If you ever want to revert all spacing and border settings back to their default state, simply use the Reset All button to quickly reset everything.

With Global Spacing & Borders, you can create a polished and uniform design across your entire website while keeping full control over customization.