gpt4 book ai didi

html - 删除 Outlook 中的顶部和底部图像间距

转载 作者:太空宇宙 更新时间:2023-11-04 13:07:00 24 4
gpt4 key购买 nike

在 Outlook 桌面应用程序(2010 和 2013)中,图像的顶部和底部有一个额外的间隙: enter image description here

如果内容被标记,也许问题更容易识别: enter image description here

它看起来像一些边距和填充的东西,但那没有用。我也尝试了不同的技巧/解决方案(例如,在表格单元格上设置行高,删除表格单元格中的空格,删除周围的 div,在图像上设置 vspace 和 hspace,为图像设置 display: block,.. .),但没有效果。 HTML 看起来像:

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-top: 0px; margin-bottom: 0px;">
<tbody>
<tr>
<td width="311" valign="top" class="nopadding imagecell" style="padding: 0px 0px 0px 0px; font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;">
<div class="imagewrap" style="overflow: hidden; margin-top: 0px; margin-bottom: 0px;">
<img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;">
</div>
</td>
<td width="10" style="font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;">
&nbsp;
</td>
<td valign="top" class="background padding" style="padding: 10px 10px 10px 10px; background-color: #ececed; font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;">
<h1 style="font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 19px; font-weight: normal; color: #51ae32; margin: 0px; margin-top: 0px; margin-bottom: 0px; padding: 0px; padding-top: 0px; padding-bottom: 0px;">PhD-Program erstmals ausgezeichnet</h1>
<p style="margin-bottom: 0px;">Andipsun daereicit fugit aut quunt volupta tibus. Abore doluptu reptatiumet ad mag- nam fugit dolupturepe nissunt. El illitateni nonecatem rae odi ut dest que asperro vi- tatia ectorem dit laut optas et nonecatem rae. El illitateni nonecatem rae odi ut dest que asperro vitatia ectorem dit laut optas et nonecatem rae. <a href="/" style="color: #51ae32;">Weiterlesen</a></p>
</td>
</tr>
</tbody>
</table>

渲染应该像在其他客户端或浏览器中一样: enter image description here

最佳答案

您是否在 <head> 中包含了任何 CSS 重置? <table> 的电子邮件s 和 <td> s? 下面是我使用的一些重置代码,重点是重置 <table> 中的填充和边框。 s(不必内联):

<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}

/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
</style>
</head>

这是 full CSS reset I use for emails .

编辑

关于图像,添加 display: block;内联到每个图像以消除图像下方的任何额外空间。

<img style="margin: 0; display: block;" align="left" src="/path/to/image.jpg" width="311" height="234" alt="">

关于html - 删除 Outlook 中的顶部和底部图像间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39677201/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com