Tip for Debugging Misaligned Elements, Erratic Spacing, and Unusual Layouts
I found this method of debugging to be quite useful when it comes to debugging email layouts on email clients that doesn't support HTML/CSS debugging. Usually, you can easily debug emails on those that support HTML/CSS debugging, such as on web browsers (Chrome Developer Tools, IE Inspector, Firefox Developer Tools, etc.) But you can't do HTML/CSS debugging on Outlook 2007/2010/2013/2016, and mobile device email apps.
Instead, we have to use supported options for debugging, of which, adding a border to the elements is supported universally.
border: 1px solid #XXX; in your element's
style attribute, you should be able to find out what is causing the issue in your emails. Replace the
#XXX with any simple RGB colors.