Smart Spacing is a feature unique to Automatic.css and is easily one of the most impactful features in the framework as it helps you achieve even spacing within containers on the pages you’re building while simultaneously applying automatic spacing for rich text content, blog posts, and other content with limited styling controls.
How Smart Spacing works
It’s common in modern web design to want even spacing between elements in a container. The most common method for achieving this is with the gap property.
Unfortunately, even spacing with gap can be difficult to achieve because certain elements, like headings, paragraphs, lists, and list items, often have default margins added by either the page builder or the user agent stylesheet.
The result is an even gap between elements but an unbalanced result thanks to the default margins.
Smart Spacing removes the default margin from headings, paragraphs, lists, and list items, allowing you to use gap to space your content evenly. This gives you full control over your spacing in every container as well as the ability to achieve perfectly even spacing.
But, that’s not all that Smart Spacing does.
Once the default spacing is removed, Smart Spacing then decides where the default spacing should *actually* be applied (rather than applying it to all these elements by default) and uses your preferred spacing values to do it (via the ACSS dashboard).
Here’s a rundown of where Smart Spacing values are applied:
- Content within rich text elements
- Content within blog post content (via the post content element in the builder)
- Content within a container with the class
.smart-spacing - Woocommerce element content
Furthermore, when the default spacing is re-applied, it’s only applied to matching elements (headings, paragraphs, lists, and list items) that have adjacent siblings.
This ensures that spacing is only applied when needed and that extra spacing above a first child or below a last child never occurs.
One huge benefit of Smart Spacing is that you can space blog post content without custom CSS. Most page builders have a “post content” element that pulls in content from the Gutenberg editor, but these modules rarely have individualized controls for heading, paragraph, list, and list item spacing. With Smart Spacing, you have automatic control over the spacing of these elements from the ACSS dashboard.
How to use Smart Spacing
First, turn on Smart Spacing in the Typography panel.
Next, use gap within your typical page-building workflow to space out the content throughout your page evenly. Remember, your parent container needs to be set to Flex or Grid. Flex column is the most common approach.
That’s it! Smart Spacing will take care of the rest.
If there’s ever a situation where smart spacing is not automatically applying default margins where you think it’s supposed to (situations where you aren’t using gap), try adding the .smart-spacing utility class to the parent container.