--- title: Three Ways of Editing Spacing in HubSpot Themes description: Explore three ways of editing vertical spacing between elements of a HubSpot theme. This can be sometimes tricky and discouraging especially for new users image: https://www.uxeful.com/hubfs/uxeful.com/blog/edit-spacing-hubspot-themes.jpg --- [![Uxeful Templates](https://www.uxeful.com/hs-fs/hubfs/uxeful.com/uxeful-logo.png?width=380&height=149&name=uxeful-logo.png "Uxeful Templates")](https://www.uxeful.com) menu close [aStack](https://www.uxeful.com/#astack) [Services](https://www.uxeful.com/#services) [Prices](https://www.uxeful.com/#prices) [Blog](https://www.uxeful.com/blog) Themes add [texture aStack - PRO](https://ecosystem.hubspot.com/marketplace/website/complete-theme-by-uxeful-templates) [mood Smyle - free](https://ecosystem.hubspot.com/marketplace/website/smyle-free-theme-by-uxeful-templates) [dinner\_dining Table 4.2 - free](https://ecosystem.hubspot.com/marketplace/website/table-4-2-free-theme-by-uxeful-templates) [restaurant\_menu Table 4.2 - PRO](https://ecosystem.hubspot.com/marketplace/website/table-4-2-pro-theme-by-uxeful-templates) [house Real Thor - free](https://ecosystem.hubspot.com/marketplace/website/real-thor-free-theme-by-uxeful-templates?__hstc=142933098.8517ff9f3af79da87803b25b35c018e5.1642896939030.1658940184747.1659122658033.36&__hssc=142933098.1.1659122658033&__hsfp=912411482) [apartments Real Thor - PRO](https://ecosystem.hubspot.com/marketplace/website/real-thor-pro-theme-by-uxeful-templates) [celebration Avenue - free](https://ecosystem.hubspot.com/marketplace/website/avenue-free-theme-by-uxeful-templates) [balance BROLO - free](https://ecosystem.hubspot.com/marketplace/website/brolo-free-theme-by-uxeful-templates) [local\_cafe Cascara - free](https://ecosystem.hubspot.com/marketplace/website/cascara-free-theme-by-uxeful-templates) [Get in Touch](https://www.uxeful.com/#contact) What you are looking for? [arrow\_back](https://www.uxeful.com/blog) # Three Ways of Editing Spacing in HubSpot Themes [Claudiu Teodorescu](https://www.uxeful.com/blog/author/claudiu-teodorescu) Oct 2, 2021 12:03:28 PM [hubspot](https://www.uxeful.com/blog/tag/hubspot) [How to](https://www.uxeful.com/blog/tag/how-to) [themes](https://www.uxeful.com/blog/tag/themes) local\_offer HubSpot themes are great as they come packed with many features tailored for better and flexible editing. A big part that was introduced together with themes is the ability to edit global website variables that affect sitewide settings, such as margins and paddings that affect the overall perceived spacing. As this was a new concept, some users of the old "template style" editing found these new capabilities somewhat confusing in the beginning. There is nothing to worry though, as these new capabilities can be mastered in minutes, and will give you more flexibility and structure at the same time. ## Global HubSpot Theme Settings One big advantage of using HubSpot Themes is their ability to group site settings in one control panel where the theme developer aggregates all the website variables that can easily be changed by the webmaster or admin. Best-designed themes, like the [aStack Complete Website Theme](https://3109311.hs-sites.com/en/homepage) for HubSpot, also contain a section for defining global spacing for your website. And here's how easy it is to change a theme spacing's through the global settings: - While editing any page, click the **Design Tab** - Then, hit the **Edit Theme Settings** button - Expand the **Spacing Section**, and adjust **Vertical Spacing** ![Screenshot 2021-09-25 at 19.40.29](https://www.uxeful.com/hs-fs/hubfs/uxeful.com/blog/Screenshot%202021-09-25%20at%2019.40.29.png?width=300&name=Screenshot%202021-09-25%20at%2019.40.29.png) Note: you can go to Theme Settings also by navigating to Settings from the top menu of your HubSpot Portal, and then going to Website > Themes from the left-hand side menu. Cool, now you know how to edit the vertical spacing between paragraphs or sections of really well-designed themes, where the [HubSpot theme developer](https://www.uxeful.com/) thought about adding a global setting for that. But what if you would like to go the extra mile and make adjustments just to one or a few elements on a given page? Read on, as there's a less know trick to achieve that too. ## Changing the spacing of a single section Through the steps outlined above, you can set a default value for spacing in the Theme Settings. This value will reflect on the top margin of all the sections. "But what if I want to add a bottom margin?" I hear you asking... For every section of your content, on any page of your newly designed HubSpot website, you can edit the margins and the padding for every side of your content block. Here's how: 1. Hover over the desired section in the WYSIWYG editor ![how-to-edit-spacing-3](https://www.uxeful.com/hs-fs/hubfs/how-to-edit-spacing-3.png?width=1920&name=how-to-edit-spacing-3.png) 2. Click on the Style section button ![how-to-edit-spacing-2](https://www.uxeful.com/hs-fs/hubfs/how-to-edit-spacing-2.png?width=1920&name=how-to-edit-spacing-2.png) 3. Expand the Alignment and Spacing tab. ![how-to-edit-spacing-1](https://www.uxeful.com/hs-fs/hubfs/how-to-edit-spacing-1.png?width=1920&name=how-to-edit-spacing-1.png) 4. Change the spacing as showcased above to reflect your desired new settings Might seem a little counterintuitive at first, but once you get the hang of it, it's like riding a bike: once you get it, you never forget! ## Changing the spacing through CSS rules And we saved a last bit of information for those of you that like to get into the weeds of CSS rules for full flexibility. You can of course choose to make your custom rules and attach them to the majority of the modules designed and developed by UXeful for the aStack theme. These modules come with an advanced section, where you can simply attach a CSS class or ID, that you can later use to style with CSS code that you can simply append to your website's settings: ![Screenshot 2021-09-25 at 20.36.02](https://www.uxeful.com/hs-fs/hubfs/uxeful.com/blog/Screenshot%202021-09-25%20at%2020.36.02.png?width=300&name=Screenshot%202021-09-25%20at%2020.36.02.png)In the example above, we've simply added the "my-element" CSS class, that we can later use to style the container, that of course may include any type of rule that affects spacing, like margin or padding: ![Screenshot 2021-09-25 at 20.39.09](https://www.uxeful.com/hs-fs/hubfs/uxeful.com/blog/Screenshot%202021-09-25%20at%2020.39.09.png?width=450&name=Screenshot%202021-09-25%20at%2020.39.09.png) ## Get the latest from UXeful Share your email so UXeful can send you guides and industry news. aStack Theme [Demo Website](https://3109311.hs-sites.com/en/homepage) [Buy aStack](https://app.hubspot.com/l/ecosystem/marketplace/assets/themes/complete-by-uxeful-templates) [Documentation](https://3109311.hs-sites.com/documentation) Follow us [Blog](https://www.uxeful.com/blog) [YouTube](https://youtu.be/bAYrld1mUpU) Other Products [Answers Automate](https://www.answersautomate.com/) new [FillyForm](https://www.fillyform.com/) Make Form Filling Simple [Terms & Conditions](https://www.uxeful.com/legal) [Privacy Policy](https://www.uxeful.com/privacy) © 2026, Uxeful Templates Uxeful Templates is an award-winning inbound marketing agency. Uxeful specializes in inbound sales and marketing techniques with more than 10 years of combined HubSpot experience. Uxeful has a proven track record of success by being a marketplace provider for over 5 years with tens of assets downloaded hundreds of times, and a perfect 5-star quality and customer support rating