（本文最初发表于2022年8月30日。更新于2024年8月16日。）
目标不是制作漂亮的企业邮箱。您希望企业邮箱干净、优雅且对订阅者友好。
设计此类企业邮箱的关键是使用边距和填充。
您的企业邮箱是否显得杂乱无章、毫无特色？您的订阅者在桌面和移动设备上浏览您的企业邮箱时是否遇到困难？
如果是这样，本指南将帮助您设计您喜欢的企业邮箱 想要 来设计。最后，您将了解如何有效地在企业邮箱中应用边距和填充。
HTML 中的填充是什么？
填充是元素边框之间的空间。它测量表格单元壁之间的像素距离（
下面是填写之前和之后的 CTA 按钮的示例。
什么是保证金？
Margin 是一个 CSS 属性，指的是元素边框周围的空间。换句话说，边距指定元素外部的空间。
使用边距可以在元素之间创建负空间，防止企业邮箱显得混乱。
这提高了企业邮箱的可读性和易读性。因此，为了节省空间，以下是不同方面的外观。
HTML 边距和填充
填充用于在单元格中添加空间
代码如下所示：
- 对于边距属性：
- 对于 HTML 填充：
下表显示了 HTML 中的内边距和边距之间的主要区别。
至于相似之处，您可以使用媒体查询根据视口宽度更改元素的边距或填充：
/* Default styles */ .element { margin: 10px; padding: 20px; } /* Styles for screens wider than 600px */ @media (min-width: 600px) { .element { margin: 20px; padding: 30px; } }在上面的示例中，边距和填充值是根据屏幕宽度进行调整的。
填充物使用方法
？ 如果指定宽度属性或属性，则填充
可能无法正常工作。来控制宽度 在有效使用填充时，您可以遵循以下两个提示： - 设置宽度
容器，然后添加一个 一个或一个
嵌套而不指定宽度。这种方法将可以定义内部的边距
。 - 创建一个与单元格大小相匹配的清晰 GIF 图像
。 如何使用边距？
使用 CSS 页边距，您可以调整企业邮箱中元素的位置。
您还可以将边距值设置为“自动”。这允许您控制两个相邻元素之间的间距，从而允许您在企业邮箱中的图像之间以及图像和文本之间创建足够的空白。
笔记： 负边距值可用于在网页设计中重叠页面元素，但企业邮箱客户端不支持此功能。
“您不能将填充设置为“自动”。但您可以将边距设置为自动。这允许浏览器根据容器中的可用空间自动计算边距空间。”
– Hetal Chavda，Email Uplers 高级 HTML 开发人员
添加间距的其他方法
以下是在 HTML 企业邮箱中添加间距的一些替代方法。
1. 使用细胞
空的 过去，企业邮箱开发人员经常使用单元格
空白以在内容周围创建空间。 然而，随着移动响应能力的兴起，这种方法已经过时，因为它不适用于响应式企业邮箱。您可以使用以下代码代替：
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; padding: 0; } .container { width: 100%; max-width: 600px; margin: auto; padding: 20px; box-sizing: border-box; } .spacer { height: 20px; /* Adjust the height for spacing */ } .content { padding: 10px; background-color: #f9f9f9; border-radius: 5px; } </style> </head> <body> <div class="container"> <p>Hello,</p> <div class="spacer"></div> <div class="content"> <p>Thank you for reaching out to us. We appreciate your feedback.</p> <div class="spacer"></div> <p>Have a great day!</p> </div> <div class="spacer"></div> <p>Best regards,<br>Your Name<br>Your Company</p> </div> </body> </html>在上面的代码中， 。容器 类以内容为中心并提供填充， .spacer 该类定义了一个特定的高度来创建垂直空间和 。内容 该类为主要内容区域提供填充以及背景颜色。
2. 使用标签
如果您想要一种简单的方法来在企业邮箱中添加空间，则标签
可以通过在企业邮箱文本中创建换行符来帮助您：<html> <head> <title>Email Example</title> </head> <body> <p>Hello,</p> <p>Thank you for reaching out to us.<br>We appreciate your feedback.<br>Have a great day!</p> <p>Best regards,<br>Your Name<br>Your Company</p> </body> </html>然而，这种方法有一个缺点。正如我们的高级 HTML 开发人员指出的：
“在台式计算机上，由标签创建的间距
可能看起来合适，但在较小的屏幕上，它可能会导致意外的视觉间隙或笨拙的格式。我们使用“隐藏”类来处理这些可见性问题。”– Dhyeyshi Gadhvi，企业邮箱 Uplers 高级 HTML 开发人员
Outlook 带来的挑战
一如既往，Outlook 是最大的缺席者。以下是 Outlook 给开发人员带来的一些挑战：
- Outlook 的问题是它无法识别标签
也不是 HTML 填充属性。因此，这些标记中的所有 HTML 填充规范都将变得无效。为了避免企业邮箱中出现这些问题，您应该使用标签
并指定其中的所有间距尺寸。这是一个示例片段。
... <table width="600" cellpadding="0" cellspacing="0"> <tr> <td align="left" style="padding: 20px;">Hello,</td> </tr> <tr> <td align="left" style="padding: 10px;">Thank you for your feedback.</td> </tr> <tr> <td align="left" style="padding: 10px;">Have a great day!</td> </tr> <tr> <td align="left" style="padding: 20px;">Best regards,<br>Your Name<br>Your Company</td> </tr>...2. 段落填充与 Outlook 2007 和 Outlook 2010 不兼容，需要一些解决方法（如下所示）来解决该问题：
有。您可以嵌入 CSS 以在所有边上添加边距。
b.对每个段落使用 margin-left、margin-right 和 margin-bottom 属性。
3. Outlook 2007 至 2016 不支持表格项目边距和 HTML 填充。您可以使用嵌套表格或间隔图像作为解决方法，如以下代码所示：
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; padding: 0; } </style> </head> <body> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td style="padding: 20px 0;"> <!-- Top padding --> <p>Hello,</p> </td> </tr> <tr> <td style="padding: 10px 0;"> <!-- Padding between paragraphs --> <p>Thank you for reaching out to us. We appreciate your feedback.</p> </td> </tr> <tr> <td style="padding: 10px 0;"> <!-- Padding between paragraphs --> <p>Have a great day!</p> </td> </tr> <tr> <td style="padding: 20px 0;"> <!-- Bottom padding --> <p>Best regards,<br>Your Name<br>Your Company</p> </td> </tr> </table> </td> </tr> </table> </body> </html>
使用内边距和边距的提示
请遵循以下提示，使 HTML 企业邮箱边距和填充更加有效：
- 使用边距来增加企业邮箱中元素外部的空白或负空间量。特别是对于移动显示，一定要充分利用边距。给企业邮箱的不同元素足够的呼吸空间。
- 如果您想更好地控制企业邮箱中的元素（您肯定会这样做），请使用 CSS 自定义填充和边距设置。
- 考虑使用标准 CSS 文件来节省时间。每当您需要更改边距和填充设置时，都可以在此文件上进行。
- 不要直接跳到个性化。使用简单的 HTML 表格开始您的企业邮箱。首先准备线框图，然后开始向其中添加内容。
使用 Email Uplers 获得干净、无杂乱的企业邮箱！
如果您希望人们不会打开并忘记您的消息，您需要设计并发送清晰、整洁的企业邮箱。如果您需要帮助了解如何执行此操作，请查看这 5 种在 HTML 企业邮箱中添加间距的技术。
我们的团队还可以帮助您设计清晰的企业邮箱。需要证明吗？
看一下我们过去为客户设计的一些企业邮箱模板。然后，联系我们，这是肯定的！
分享此文章：相关文章
微信二维码
加客服微信免费送关键词排名
- 创建一个与单元格大小相匹配的清晰 GIF 图像
- 对于 HTML 填充：