HTML 전자 메일 - 추가 이미지 코딩 아웃 라인/경계 - Gmail 및 Outlook

Question

간단한 HTML 전자 메일을 코딩 중이며 gmail 및 Outlook 2003 및 2007에서 이상한 동작이 발생합니다. 모든 이미지 아래에 공백이 있습니다. 이미지의 인라인 스타일은 다음과 같습니다.

border: none; 
font-size: 14px; 
font-weight: bold; 
height: auto; 
line-height: 100%; 
outline: none; 
text-decoration: none; 
text-transform: capitalize; 
margin: 0px; 
padding: 0px; 

모든 스타일링은 MailChimp HTML 코드에서 가져온 것이므로 불일치가 발생하지 않아야합니다. 이 경험이 있습니까? 이미지는 표 태그 안에 있습니다. 테이블 셀은 셀 간격과 셀 패딩을 0으로 설정합니다. 다음은 문제의 스크린 샷입니다. http://cl.ly/EnFt/o

Answer 1

이미지는 기본적으로 inline입니다. 그 작은 차이는 'g'와 'q'와 같은 디 센더를위한 공간입니다.

이

<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" /> 

당신은 당신이 당신의 HTML 파일의 head이 스타일을 추가 할 수 있습니다 premailer 같은 서비스를 사용할 수 있으며, 다음 문제를 해결하기 위해, 당신은 명시 적으로 다음과 같이 block 요소로 모든 이미지를 설정해야 자동으로 인라인으로 배치됩니다.

display:block;은 분명히 각 이미지가 별도의 td 또는 이와 같아야한다는 것을 의미합니다. 나란히 표시해야하는 이미지는 서로 아래로 밀려납니다.

Answer 2

<img> 태그에 border:0;을 작성합니다. 좋아요 :

<img style="vertical-align:top; border:0;"> 

Answer 3

그냥 이미지 태그에 style="display:block;"을 사용하십시오. 잘 작동합니다.