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

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

출처

2013-04-09 Kosha Burnett

여기

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

오래된 코드 : <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;" />

출처

2013-04-09 16:34:59 cclark413

또한 style = "border-collapse : collapse"를 표에 추가해야 할 수도 있습니다. – cclark413

Excellent! 나는 그것이 도움이되었던 국경 붕괴를 추가하고 있었다라고 생각한다. 고맙습니다! –

당신은 매우 환영합니다 :) – cclark413

<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 전자 메일 계정의 공백이 제거되었습니다. 잘하면이 도움이됩니다!

출처

2014-10-07 17:08:20 Jason

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

답변

관련 문제