How do I add spacing between modules in my template?

Last updated: November 15, 2016

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A

For templates built within HubSpot's template builder, there are a few different ways to add spacing in between modules.

  • Locate your page or email's template by going in HubSpot Marketing to Content > Landing PagesWebsite Pages or Email and then opening your page or email's editor.
  • Click on Settings at the top of the editor screen and scroll down to Template Settings. Then click Edit template.
Edit Template
Edit Template
  • From within the template, locate the specific module you want to add spacing in, and click on the Gear Icon > Edit CSS.
  • Selecting Edit CSS will present to you Edit CSS Declarations, where you can add Custom Inline Styling. This allows you to enter inline CSS to add spacing. For example, as detailed below, we have added padding to a module (padding: 10px;).

  • As a side note, Email templates provide a few more options to add spacing within modules. Once you have accessed your email template, specifically the Edit CSS Declaration settings, you will see options for Border Width, as well as Inner and Outer Spacing. For example, you can add spacing above, below, to the right or to the left of the module by entering a #px into the boxes for Outer Spacing or Inner Spacing. It is good practice to start with 10px, then adjust from there.
  • Once you have entered Custom Inline Styling, click on Done to apply your custom inline CSS to the module.
  • Click Publish Changes in the upper-right hand corner to publish your changes.  

If you are not able to achieve the spacing you desire using these steps, you may need to reach out to your designer to make some changes to your CSS files for your pages or create a custom coded email template where you have more freedom to adjust spacing in the HTML.

User-added image

Was this article helpful?