How to remove top spacing from images in Hubspot Jinja template containers

Other Questions HubSpot
1

I’m building an email template on Hubspot and running into a styling issue. I’ve created a three-column layout using Jinja templating, and each column needs to have an image positioned at the very top.

The problem I’m facing is that there’s unwanted spacing (around 5-8 pixels) appearing between the top edge of my container and the image. The image isn’t sitting flush against the top like I need it to.

Here’s my current template structure:

<div style="display:block;">
  <p>{% linked_image "Hero Banner" label="Hero Banner", width="200", height="150" %}</p>
  
  <p>{% rich_text "Content Title" label="Content Title" %}</p>
  <p>{% rich_text "Content Body" label="Content Body" %}</p>
</div>

The “Hero Banner” image keeps showing up with that gap at the top instead of aligning perfectly with the container edge. Has anyone dealt with this before? What’s the best way to eliminate this spacing issue?

Any help would be appreciated!

2

i had the same prob. it’s those <p> tags adding margins. try taking them out, place the image in the div directly or maybe use a <span>. that worked for me. keep it simple!

3

I’ve hit this margin issue tons of times with HubSpot email templates. Sure, the paragraph tag thing others mentioned works, but here’s what I actually do - skip any container around the linked_image and drop it straight into your main div. Then add vertical-align: top to the image styling. You can either throw inline styles on your linked_image module or target it with CSS. Also, check if your div’s picking up weird inherited styles from HubSpot’s default email CSS - they love adding base styles to containers that mess with spacing. I always slap a CSS reset at the template level to kill those defaults. This trick’s saved me hours on client projects where spacing looked wonky across different email clients.

4

Yeah, it’s definitely the paragraph tags. Browsers automatically add margin and padding to

elements. Don’t wrap your linked_image in a paragraph - use a div instead with explicit styling to reset those margins. Try

around your image. The line-height property is key here since it kills any leftover spacing from text formatting. I’ve done this on multiple HubSpot templates and it always fixes the top spacing issue without messing up your layout.