HTML 전자 메일에서 이미지 위에있는 공백을 제거하려면 어떻게합니까?

Question

웹 및이 사이트를 검색하여 가능한 모든 해결책을 시도했지만 Outlook 2007-2013이 내 이미지 위에 흰색 스트립을 왜 생성하는지 파악할 수 없습니다. 여기 http://www3.districtadministration.com/mailing/Templates/da-webinar-archives.html

내 코드입니다 : 이미지의 각 블록 : 당신이 디스플레이를 추가 할 필요가 생각

<table id="webinars" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #e6e6e6;"> 
    <tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;"> 
     <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;"> 
     <a href="[WEBINAR TITLE #1]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br /> 
     Sponsored by add sponsor 
     </td> 

     <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #1]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a> 
     </td> 
    </tr> 

    <tr style="border-bottom:#e6e6e6;"> 
     <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;"> 
     <a href="[WEBINAR TITLE #2]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br /> 
     Sponsored by add sponsor 
     </td> 

     <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #2]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a> 
     </td> 
    </tr> 

    <tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;"> 
     <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;"> 
     <a href="[WEBINAR TITLE #3]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br /> 
     Sponsored by add sponsor 
     </td> 

     <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #3]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a> 
     </td> 
    </tr> 

    <tr style="border-bottom:#e6e6e6;"> 
     <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;"> 
     <a href="[WEBINAR TITLE #4]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br /> 
     Sponsored by add sponsor 
     </td> 

     <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #4]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a> 
     </td> 
    </tr> 
</table> 

Answer 1

여기

은 전체 이메일의 링크입니다.

오래된 코드 : <img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" />

새로운 코드 : <img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" style="display:block;" />

Answer 2

<img alt="Image Description Goes Here" border="0" src="http://www.your-image-url-goes-here.jpg" 
width="600" height="176" style="padding:0px; display: block; line-height: 0px; font-size: 0px; border:0px;" 
align="top"> 

당신은 그 안에 ... align="top" ... 코드가 필요합니다. 이렇게하면 이미지가 맨 위에 정렬됩니다. 다른 모든 코드 치수를 0px으로 설정하면 공백을 0px으로 지정합니다. 또한 display:block은 공백을 제거하는 데 매우 중요하므로 브라우저는 그림의 레이아웃과 형식을 표시하는 방법을 알고 있습니다.

이 코드를 테스트 한 결과 Gmail, AOL, Yahoo, Hotmail 및 원격 Outlook 전자 메일 계정의 공백이 제거되었습니다. 잘하면이 도움이됩니다!