Padding controls the space between your content and the edges of its container. In email design, getting padding right is the difference between an email that feels polished and one that feels cramped or disjointed. The Email Love Figma Plugin uses Figma's Auto Layout to translate padding values directly into MJML padding attributes — what you set in Figma is what you get in the exported email.
Where Padding Applies
Padding can be set on several layers in your email structure. Each level affects a different part of the layout:
Wrapper padding (mj-wrapper) controls the space between the wrapper's edge and the sections inside it. Use this for overall breathing room around groups of content.
Section padding is controlled by the spacing within the section layer. This sets the space between the section's boundary and its columns.
Column padding (mj-column) controls space between the column edge and the content elements inside it. This is the most commonly adjusted padding — it determines how much space text, images, and buttons have from the edges of their column.
Content element padding (mj-text-frame, mj-image-frame, mj-button-frame) adds space around individual elements. Use this when you need different spacing on specific elements within the same column.
How to Set Padding
- Select the layer you want to adjust (wrapper, column, text frame, image frame, or button frame).
- In Figma's right-hand panel, find the Auto Layout section.
- Adjust the padding values. You can set padding uniformly (all four sides) or individually (top, right, bottom, left) by clicking the padding icon to expand individual controls.
- The plugin reads these Auto Layout values and exports them as MJML padding attributes.
Set Height to "Hug"
For best results, make sure the Height of each component and its child frames is set to "Hug contents" (not "Fixed"). This allows the component to grow or shrink based on the content inside it. Fixed-height containers can cause content clipping, especially in Outlook.
Recommended Padding Values
These are starting points based on common email design patterns. Adjust to match your brand's design system.
Column padding (most common):
A good default is 20–30px on left and right, with 10–20px on top and bottom. This gives text and images comfortable breathing room from the column edges.
Section padding:
Typically 0–20px. Many designers set section padding to 0 and control all spacing at the column and element level instead. This gives more granular control.
Element-level padding:
Use sparingly for fine-tuning. If you need 10px extra space above a button but not above the text above it, element-level padding is the right tool.
Wrapper padding:
Often set to 0–20px. Wrapper padding affects the outermost content boundary. If you want a visible gap between the email content and the outer background color, this is where you set it.
Padding Tips for Better Emails
Be consistent. Use the same padding values throughout your email. If your columns have 24px horizontal padding, stick with 24px everywhere rather than mixing 20px and 30px across different sections.
Think in multiples. Pick a base unit (like 8px) and use multiples of it: 8px, 16px, 24px, 32px. This creates a visual rhythm that makes your email feel intentionally designed.
Don't forget mobile. Padding that looks right on desktop (640px wide) can feel too generous on a 375px phone screen. Use the Mobile Styles tab to set separate mobile padding values when needed.
Watch your total width. Column padding eats into the space available for your content. Two columns at 50% width with 30px padding on each side means your actual content area is much narrower than you might expect.
Use padding instead of spacer elements when possible. While the plugin supports mj-spacer for vertical spacing, setting appropriate top and bottom padding on elements often gives you more control and cleaner code.
Mobile Padding
The Mobile Styles tab lets you override padding for mobile devices. This is particularly useful when:
- Desktop padding feels too wide on small screens
- You want tighter spacing on mobile to maximize content area
- Text blocks need less horizontal padding to prevent overly narrow line lengths
To set mobile-specific padding, select a layer, open the Mobile Styles tab in the plugin, and enable the padding override.
Troubleshooting
"My padding isn't showing up in the export"
Make sure you're setting padding via Figma's Auto Layout, not by manually positioning elements. The plugin reads Auto Layout padding values — manual positioning won't translate to MJML padding.
"Content is getting clipped or overlapping"
Check that your frame heights are set to "Hug contents" rather than a fixed pixel value. Fixed heights combined with padding can cause content to overflow its container.
"Padding looks different in Outlook"
Outlook (Windows) sometimes interprets padding slightly differently due to its Word-based rendering engine. If you're seeing inconsistencies, try using even numbers for padding values and avoid very small values (under 5px) which Outlook may ignore entirely.
"My columns are too narrow after adding padding"
Remember that padding is added inside the column, reducing the available content area. If you have two 50% columns with 20px padding on each side, you're losing 80px of content width total. Consider reducing padding or using fewer columns.
Need help dialing in your padding? Reach out to support@emaillove.com.
Powered by