修复电子邮件通讯布局：代码效果与预期不符问题排查

问题描述 #

制作电子邮件通讯布局时，某元素的实现效果与预期不符：

• 预期：左侧灰色背景区域与右侧图片顶部对齐，且图片填满右侧单元格高度，和左侧区域等高
• 当前：图片居上但与左侧灰色区域高度错位，布局不协调

原代码 #

<tr>
    <td style="background-color:#ffffff;">

        <table style="max-width: 535px; margin-top: 50px; text-align:center; margin-left:auto; margin-right:auto;">
            <colgroup>
                <col span="1" style="width: 60%;">
                <col span="1" style="width: 40%;">
            </colgroup>

            <tr>
                <td style="padding:0; background-color:#e9e9e9; text-align: left; font-family: Lora; width:235px;">
                    <div style="padding: 10px 30px;">
                        <h2 style="color:#BF1435; text-transform:uppercase;">Срок завершения работ - 01.09.2023</h2>
                        <p><strong>Всего 25 апартаментов.</strong></p>
                    <p><strong>Редкие планировки - от 25 м².</strong></p>
                        <p><strong>Высота потолка - 3 м.</strong></p>
                        <p><strong>Апартаменты с отделкой:</strong> стены выкрашены в светлые тона, плитка в с/у, на полу паркет, выполнена разводка электрики и сделаны основные выводы.</p>
                    </div>
                </td>

                <td>
                    <img src="images/image-card-1.png" style="width:200px">
                </td>
            </tr>
        </table>
    </td>
</tr>

问题分析 #

• 列宽规则冲突：<colgroup>定义了60%/40%的列宽，但左侧单元格硬设width:235px，导致列宽逻辑混乱，布局宽度失控。
• 图片对齐与适配缺失：右侧图片未设置vertical-align: top，且未配置高度匹配左侧单元格，导致视觉上下错位；仅设宽度不限制高度，易出现尺寸偏差。
• 表格边距处理不当：未设置border-collapse: collapse，部分邮件客户端会产生额外间隙。
• Div标签兼容性差：Outlook等客户端对<div>的padding支持不佳，容易导致内边距失效。

修复后的代码 #

<tr>
    <td style="background-color:#ffffff;">
        <!-- 增加border-collapse确保表格无间隙，移除冲突的width设置 -->
        <table style="max-width: 535px; margin-top: 50px; text-align:center; margin-left:auto; margin-right:auto; border-collapse: collapse;">
            <colgroup>
                <col span="1" style="width: 60%;">
                <col span="1" style="width: 40%;">
            </colgroup>

            <tr>
                <!-- 把padding从div移到td，移除硬设的width -->
                <td style="padding:10px 30px; background-color:#e9e9e9; text-align: left; font-family: Lora;">
                    <h2 style="color:#BF1435; text-transform:uppercase; margin: 0 0 10px 0;">Срок завершения работ - 01.09.2023</h2>
                    <p style="margin: 5px 0;"><strong>Всего 25 апартаментов.</strong></p>
                    <p style="margin: 5px 0;"><strong>Редкие планировки - от 25 м².</strong></p>
                    <p style="margin: 5px 0;"><strong>Высота потолка - 3 м.</strong></p>
                    <p style="margin: 5px 0;"><strong>Апартаменты с отделкой:</strong> стены выкрашены в светлые тона, плитка в с/у, на полу паркет, выполнена разводка электрики и сделаны основные выводы.</p>
                </td>

                <!-- 图片设置vertical-align:top，宽度100%填充列，高度自适应匹配左侧 -->
                <td style="padding:0;">
                    <img src="images/image-card-1.png" style="width:100%; vertical-align: top; display: block;">
                </td>
            </tr>
        </table>
    </td>
</tr>

修复说明 #

1. 移除左侧单元格硬设的width:235px，让<colgroup>的60%/40%列宽规则生效。
2. 将<div>的padding移到左侧<td>上，提升邮件客户端兼容性。
3. 给图片添加vertical-align: top确保和左侧顶部对齐，设置width:100%填充右侧列，display:block避免图片下方出现默认间隙。
4. 给外层表格添加border-collapse: collapse消除潜在间隙。
5. 给文本元素添加margin控制间距，避免默认样式导致的布局混乱。

内容的提问来源于stack exchange，提问作者Artem Mishkin