Como evitar espaço em branco extra abaixo do parágrafo nas assinaturas de e-mail

0

Estou criando a assinatura de e-mail da empresa em HTML.

Eu percebo que a assinatura não parecerá 100% idêntica em cada cliente de e-mail (isso é um eufemismo), mas minha assinatura atual parece bastante estável agora.

Uma coisa continua me incomodando: quando a assinatura é visualizada em uma conta de e-mail live.com ou outlook.com, sempre vejo espaço em branco extra abaixo de cada parágrafo <p> -tag.

O Outlook.com faz isso intencionalmente: quando eu removo o uso de tags de parágrafo e coloco minhas informações CSS no estilo span, o outlook.com ainda adiciona uma tag de parágrafo. Então, o efeito do espaço em branco está sempre presente.

O efeito é que minha assinatura está completamente esticada verticalmente, pois há alguns desses parágrafos. Eu não posso me limitar a apenas um, porque o layout da minha assinatura é estruturado com tabelas.

Eu realmente não consigo encontrar como evitar isso. Alguém pode me dizer se é possível remover esse espaço em branco extra?

Este é um código de exemplo: uma linha da tabela que contém uma célula com um parágrafo e extensão. Portanto, remover o parágrafo não ajuda, já que o outlook.com o adiciona de novo:

<tr>
    <td width="10" height="30" style="background-color:#009bd7;line-height:17px;height:30px;">            <!-- --></td>
    <td width="10" height="30" style="font-size:3px; line-height:17px;height:30px;">            <!-- --></td>
    <td width="360" height="30" align="left" style="border-bottom-style:solid;border-bottom-color:#aaaaaa;border-bottom-width:1px;line-height:17px;height:30px;">
       <p style="font-family:Arial;margin:0px;margin-bottom:0px;margin-top:0px;padding:0px;padding-bottom:0px;padding-top:0px;"><span style="font-family:Arial; COLOR:#009bd7; FONT-SIZE: 8pt;margin:0px;padding:0px;margin-bottom:0px;margin-top:0px;height:30px;"><strong>Visit us at WOTS 2014 in Utrecht from 30/9/14 till 3/10/14.<br /><a style="COLOR: #009bd7; TEXT-DECORATION: none" href="https://link">Click here</a> for a free entrance ticket.</strong></span></p>
    </td>
</tr>

Este é o efeito, visto no Outlook 2010 (que é bom), visualizado à direita no Outlook.com ou no Live.com. (Clique para ampliar).

    
por SonOfGrey 03.10.2014 / 10:22

0 respostas