Padding issues can occasionally cause unexpected spacing or layout inconsistencies in emails created with the Email Visual Editor. While some visual differences may be caused by how individual email clients render emails, many spacing issues can be resolved by reviewing the padding settings within the editor.
This guide explains how to identify and troubleshoot common padding-related issues directly in the Email Visual Editor.
1. Check padding at all levels
Padding can be applied at different levels of a template, so it is important to review each layer individually:
- Rows: Check the left and right padding, as well as any top or bottom padding that has been configured.
- Columns: Verify the left and right padding, as well as any top or bottom padding that has been configured.
- Content blocks: Check the padding applied to individual blocks, such as images, text, buttons, or other elements.
- Content area width: Review the padding settings applied to the overall content area.
When troubleshooting, compare the padding values across these levels to make sure that additional spacing is not being introduced unintentionally.
2. Isolate the problem
If the source of the extra spacing is not immediately clear, try isolating the affected section:
- Save a copy of the template.
- Remove or temporarily disable blocks one at a time.
- Preview the template after each change.
- Check whether the spacing issue disappears.
This can help determine whether a specific row, column, or content block is responsible for the unexpected spacing.
Tip: Always work on a copy of the template when removing or changing content during troubleshooting.
3. Test with different content
The issue may sometimes be related to the content itself rather than the padding configuration.
For example, try replacing the affected image, text, or other content block with a different one and check whether the spacing changes.
This can help determine whether the issue is caused by:
- The specific content block configuration.
- Image dimensions or formatting.
- Content-specific spacing.
- The original asset itself.
If the issue disappears after replacing the content, compare the original and replacement blocks to identify what is different.
4. Check image borders and built-in whitespace
Images can sometimes contain borders or additional whitespace within the image file itself. This can make the image appear to have extra padding even when no additional padding has been configured in the editor.
If an image appears to have unexpected spacing around it:
- Check the original image file for built-in whitespace.
- Check whether the image contains a visible or transparent border.
- Try replacing it with another image to see whether the spacing persists.
- Compare the image dimensions and formatting with the expected layout.
This helps rule out the possibility that the spacing is part of the image itself rather than being caused by the Email Visual Editor.
5. Keep email client rendering in mind
If the padding settings in the editor appear correct but the email still looks different in the final inbox, the issue may be related to email client rendering.
Different email clients can interpret and render HTML and CSS differently. Therefore, this troubleshooting guide focuses specifically on padding and spacing configured within the Email Visual Editor and does not cover every possible email client rendering difference. If the issue only occurs in a specific email client while the template looks correct in the editor and other clients, further investigation into email client-specific rendering may be requireed.
Short checklist:
- Check padding settings: Review padding at the row, column, content block, and content area levels.
- Isolate the issue: Remove or disable blocks one at a time to identify what is causing the extra spacing.
- Test different content: Replace the affected image, text, or block to check whether the issue is content-specific.
- Check images: Make sure the image itself doesn’t contain built-in whitespace or borders.
- Consider email client rendering: If everything looks correct in the editor but not in the inbox, the difference may be caused by how a specific email client renders the email.
Following these steps can help identify whether unexpected spacing is caused by the template's padding configuration, the content itself, or email client rendering.