Spacing

Allows you to set both margin and padding around just about any element on your page. You can set different sizes for each of the responsive breakpoints, as well as make use of some preset sizing.

Examples

The Spacing tool is used as a utility with other elements on the page and thus doesn't have something that would be appropriate as a visual example here.

I have been offered a lot for my work, but never everything.

Padding and Margin are a great way to space out your content, giving it breathing room and a natural flow. Spacing allows you to fine tune your layout for each of the 6 responsive breakpoints using both of these. It is one of the most used, versatile tools in the Foundry toolbox.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Mode, Sides & Units

Margins Mode

By default the Spacing tool is setup to use Foundry's Easy Presets mode. This helps maintain the continuity of spacing throughout your page and site and saves you time as well. If you'd like to refine your spacing, or just need something that is not offered as a preset you can use the Advacned Mode.

When you change this setting you'll notice that the 6 responsive breakpoint setting sections will adapt to your selection.

Active Sides

Here you'll choose which sides your margin settings will be applied to. Most often you'll be applying this to all sides, but in the event you only need specific sides you can simply deselect the sides which you wish to ignore for this instance of the tool.

Margin Units

If you've selected the Advanced Mode you'll also be given a drop down that allows you to select the units of measure for your margin values.

Padding Mode

By default the Spacing tool is setup to use Foundry's Easy Presets mode. This helps maintain the continuity of spacing throughout your page and site and saves you time as well. If you'd like to refine your spacing, or just need something that is not offered as a preset you can use the Advacned Mode.

When you change this setting you'll notice that the 6 responsive breakpoint setting sections will adapt to your selection.

Active Sides

Here you'll choose which sides your padding settings will be applied to. Most often you'll be applying this to all sides, but in the event you only need specific sides you can simply deselect the sides which you wish to ignore for this instance of the tool.

Padding Units

If you've selected the Advanced Mode you'll also be given a drop down that allows you to select the units of measure for your padding values.

Breakpoints

Margin & Padding

Each of the 6 responsive breakpoints has its own section here, allowing you to control both the Margin and Padding settings independently.

When using Easy Presets for either Margins and / or Padding you'll be given a drop down with said presets to choose from. When using Advanced Mode you'll be presented with a set of 4 fields for entering your custom values. These are available at each breakpoint.

Any breakpoint above Extra Small in size also has the option to Inherit the margin and / or padding settings from the previous, smaller breakpoint.

This new way that Spacing works greatly improves its versatility over previous iterations in pas versions of Foundry.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.