How to fix image positioning issue in Hubspot email template with Jinja templating

Other Questions HubSpot
1

I’m working on building an email template using Hubspot and their Jinja templating system. I’ve set up a layout with three columns for different content sections. In the first column, I want to place an image right at the very top, but I’m running into a spacing problem.

The issue is that there’s always a gap of about 5-8 pixels between the top edge of my container div and where the image actually starts. No matter what I try, I can’t get the image to sit flush against the top.

Here’s the code structure I’m using:

<div style="display:block;">
<p>{% linked_image "Product Photo" label="Product Photo", width="200", height="150" %}</p>
<p>{% rich_text "Product Title" label="Product Title" %}</p>
<p>{% rich_text "Product Details" label="Product Details" %}</p>
</div>

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

2

That spacing issue comes from default browser margins and padding on paragraph elements. Since you’re wrapping your linked_image in a

tag, that’s creating the 5-8 pixel gap. I’ve hit this exact problem with HubSpot templates. Skip the

tag completely - put your Jinja template code directly in a styled div instead. Or reset the styling on your container: add line-height: 0; margin: 0; padding: 0; to your div. The line-height part is key because it controls how inline elements sit vertically. You might also throw in vertical-align: top; since some email clients get weird with image positioning.

3

Everyone’s right about the paragraph tag issue, but here’s what I learned after dealing with tons of email template headaches - manual CSS fixes are just band-aids.

I stopped fighting HubSpot’s templating quirks and started using automation for email formatting. Instead of wrestling with Jinja spacing, I set up workflows that pull product data from our CRM and generate clean HTML emails automatically.

You can pull images, titles, and details from anywhere, format them exactly how you want without spacing issues, then push the final template back to HubSpot or send through your preferred email service.

No more debugging paragraph margins or wrestling with table layouts. Just clean, consistent emails that look identical across all clients.

This saves me about 10 hours a week that I used to spend tweaking template code. Now I modify the automation logic once and it handles hundreds of email variations perfectly.

Check out Latenode for this - it connects with HubSpot’s API really well and handles email formatting automatically: https://latenode.com

4

Had the exact same issue building HubSpot templates a few months ago. Those paragraph tags definitely cause the whitespace problem, but I found a better fix than messing with default styles. Just wrap everything in a table structure - gives you way more control over spacing in email clients. Use something like <table cellpadding="0" cellspacing="0" border="0"><tr><td>{% linked_image "Product Photo" label="Product Photo", width="200", height="150" %}</td></tr></table>. Email templates work much better with table layouts, especially since different clients handle CSS all over the place. The cellpadding and cellspacing kill those random gaps that CSS resets don’t always catch.

5

ahh, the classic hubspot spacing nightmre! try removing that

tag around your linked_image, and just put the jinja code directly in the div. those paragraph tags add default margins that cause the gap. also, add margin:0; padding:0; to the div style to be safe.