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
Was this useful?
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
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.