Definition
Padding in email design refers to the space between an element's content and its border or outer edge. It is a fundamental CSS spacing property that creates visual breathing room around text, images, buttons, and other email elements. Proper padding significantly improves readability and visual polish.
In email HTML, padding is typically applied using inline CSS on table cells (td), divs, or directly on elements. Each email client supports padding slightly differently, which requires specific coding approaches — particularly for Outlook desktop, which handles padding inconsistently on certain elements.
Padding in Email Clients
| Element | CSS Property | Outlook Support |
|---|---|---|
| Table cell | td { padding: 10px } | Good |
| Div | div { padding: 10px } | Good in modern, limited in older |
| Button link | a { padding: 10px } | Limited — use table-based buttons |
| Paragraph | p { padding: 10px } | Most clients support |
| Image | img { padding: 10px } | Good |
Best Practices
- Use table cell padding (td) for reliable cross-client spacing
- Apply consistent padding values for a uniform visual rhythm
- Use minimum 10–15px padding on mobile to prevent text from touching screen edges
- Increase button padding (15–20px) for comfortable tap targets on mobile
- Reduce padding on nested tables to prevent excessive whitespace compounding
- Test padding rendering in Outlook desktop where spacing can collapse
- Use spacer elements (empty table cells with width/height) as an alternative for critical spacing
Related Glossary Terms
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Drag-and-Drop Email Editor
A drag-and-drop email editor is a visual interface that allows marketers to build email layouts by dragging content blocks into place without writing HTML or CSS code.
Email Accessibility Guidelines
Email accessibility guidelines ensure emails are usable by people with disabilities, following WCAG standards for screen readers, colour contrast, keyboard navigation, and readable content.
Email Accessibility
Email accessibility ensures marketing emails are usable by people with disabilities, including those using screen readers, keyboard navigation, or assistive technologies. It follows WCAG 2.1 guidelines for structure, contrast, semantics, and descriptive content.
Attachment
An email attachment is a file sent along with an email message — while common in personal and business correspondence, attachments are generally discouraged in marketing emails due to security, deliverability, and compatibility concerns.
Email Body
The email body is the main content area of an email message, containing the visible text, images, and structural elements that communicate the message to the recipient.
Frequently Asked Questions
Padding is space inside an element between content and border. Margin is space outside an element between it and adjacent elements. Margins have less reliable email client support than padding, particularly in Outlook. When possible, use padding or spacer table cells instead of margins.
Minimum 10–15px padding on each side for the email body and content sections. Buttons need 15–20px padding for comfortable thumb tapping. Text blocks benefit from 10–15px vertical padding between paragraphs. The goal is readability without wasting screen space.