Element Spacing

This article was last updated on the January 2, 2017.

In order for posts and pages to flow properly, all elements must receive some type of margin or padding to give adequate spacing. Headings by default receive a certain degree of margin up top to space a normal document out nicely. Think if you had a long page with just paragraphs and headings, this spacing is what would give your eye a visual break between sections. Additionally, the [content_band] shortcode (among other elements) by default has some margin on the bottom for this very same reason—normalized document flow.

While this spacing is beneficial in regular documents, it might not be desirable in other instances. Fortunately, we have provided our users with plenty of great helper classes, which are listed out towards the end of our documentation as well as in the Knowledge Base. In most cases, users want to remove the extra spacing above a heading; for instance, the heading output by the [custom_headline] shortcode. The helper class you might want to use in this instance is the mtn class, which stands for margin top none. This will remove the excess spacing from the heading by adding it via the class attribute like so (simplified for demonstration purposes):

[custom_headline class="mtn"] ... [/custom_headline]

Which would look the same if you’re using a [feature_headline] shortcode:

[feature_headline class="mtn"] ... [/feature_headline]

You can even utilize this class with standard HTML markup as well:

<h2 class="mtn"> ... </h2>

As stated above, the [content_band] shortcode features some additional margin on the bottom for spacing concerns. This can easily be disabled via the no_margin attribute, which you can set to true to remove the spacing beneath the band:

[content_band no_margin="true"] ... [/content_band]

All shortcodes are spaced out differently to suit the needs of the function it is working to accomplish, and while some have options to remove or modify spacing as needed (i.e. the [content_band] shortcode), not all of them do. If you find yourself in a situation where you need to modify a particular shortcode’s spacing, you might want to dig a little deeper to make these modifications.

Inspecting Elements

To figure out where any extra spacing is coming from in the future, you can do this very easily in Chrome. Simply right click on the element in question and select Inspect Element. This will bring up a popup at the bottom of your window which will show your page markup on the left and CSS on the right. You can hover over the markup in the popup to see where excess margin and padding is coming from. Margin is designated with orange, like so:

Element Spacing

And padding is designated with green:

Element Spacing

Once you have this information, you can come back to your page and either adjust with your own classes, inline styling, or our helper classes if that suffices. Knowing how to inspect elements and adjust them as needed is hugely beneficial as it will afford you the ability to fine-tune your pages and get those last minor details just right for your design.