Section Padding Classes

Section padding tends to be a very misunderstood thing in web design. There are multiple ways to accomplish the same thing, and nobody has really set a standard for how things should be done.

At Automatic.css, we’ve been advocating for a standard for section structure and spacing practices based on the methods that have the most pros and the least cons.

Here’s a video that discusses proper section fundamentals:

• Sections should consist of at least two elements: the section itself and and inner div.
• A “gutter” for the website (inline spacing between content and device edge) should be established with inline padding on the section element.
• The inner div should be the website’s content width and auto-centered. This div should not have any extra inline padding and typically shouldn’t have any padding at all unless it’s going to have its own background styling.
• If a section needs more white space, you should almost always use extra block padding (top and bottom padding) for this. Min-height should be avoided here except in rare cases.
• The same rules apply for the site’s header and footer, though it’s also common for these elements to appear full-width rather than content-width.

Automatic.css is designed with these best practices in mind.

Default Section Padding

Every section element you add to a page will have default section padding. The inline padding is equal to the “inline padding” value you set in the dashboard. The block padding is equal to “medium” section spacing.

Section padding is added by default to speed up workflow and improve maintainability. Requiring you to put a .pad-section--m class on every section by default would be frustrating and inefficient.

All you have to know is that the default section padding can easily be overridden at any time with utility classes, custom classes, or ID styling. You can also globally tighten or loosen the section padding via the ACSS dashboard.

Section Padding Classes

It’s common to need to adjust the block padding in sections to create more or less white space. Knowing this, we’ve created utility classes specifically for doing this.

The naming convention for these classes is .pad-section--{size}.

All of the typical t-shirt sizes are available: xs, s, m, l, xl, xxl.

Section padding classes are unique in that they don’t apply padding equally to all sides. They’re designed to maintain a consistent inline gutter while only adjusting the section’s block padding.

It should be noted that ACSS is one of the only frameworks to offer a utility like this. Other frameworks require you to use separate padding-top and padding-bottom classes that are not specifically related to sections. Not only does this require you to use extra classes on each section, but it also creates a disconnect, making it impossible for you to tighten or loosen your section spacing globally.

Section Spacing & Pro Mode

Since section padding classes are so important and useful and unique to each section, they stay active when Pro Mode is activated. They’re an example of a utility class that we still recommend using even when Pro Mode is active.