2014-09-30 7 views
2

나는 완전히 미쳐 가고 있습니다. 나는 하나의 이미지로 두 개의 인접한 셀로 간소화 한 테이블을 가지고있다. (이미지는 더 큰 그림의 일부이므로, 그들 사이에 간격이 없어야한다.) 테이블 셀 사이에 간격이나 패딩이 생기고, 위쪽과 아래쪽이 아니라 왼쪽과 오른쪽에 있습니다.OUTLOOK 2007에서 이미지가 포함 된 <TD> 사이의 간격/패딩 제거하기

cellpadding="0" 
cellspacing="0" 
border="0" 
align="left" 

display: block; 
display: inline-block; 
display: inline-table; 
border-collapse: collapse; 
border:none; 
mso-table-lspace:0; 
mso-table-rspace:0; 
width:403px!important; 
padding-left: 0px; 
padding-right: 0px; 
padding: 0 0 0 0; 
margin: 0 0 0 0; 
margin-left: 0px; 
margin-right: 0px; 

이러한 특성의 없음 조합이 제대로 작동 : 내가 포함, 모두 인라인 HTML뿐만 아니라 인라인 CSS 스타일, 포럼에서 찾을 수있는 모든 것을 시도했습니다. 당신이보기를 원한다면 여기에 나의 코드가있다. (이것은 감소 된 버전이다). 내 브라우저에서는 완벽하게 작동하지만 Outlook에 붙여 넣을 때 각 셀 사이에 간격을 둡니다. 간격을 명확하게 볼 수 있도록 마젠타 색 배경을 만들었습니다.

<table align="left" border="0" cellpadding="0" cellspacing="0" style=" 
border:none; 
border-collapse:collapse; 
background-color:magenta; 
font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
line-height:15px; 
color:#4A4A4A; 
width:403px!important; 
mso-table-lspace:0; 
mso-table-rspace:0; 
"> 
    <tr> 
     <td width="211"> 
      <img src="http://s3.amazonaws.com/cms_assets/accounts/3ceae742-b87e-4bdc-a6b3-2bcfc1c5c2d7/site-30100/cms-assets/images/457997.seal-bar-gold.png" width="211"/> 
     </td> 
     <td width="192"> 
      <img src="http://s3.amazonaws.com/cms_assets/accounts/3ceae742-b87e-4bdc-a6b3-2bcfc1c5c2d7/site-30100/cms-assets/images/569397.seal-bar-silver.png" width="192"/> 
     </td> 
    </tr> 

</table> 
+0

피들을 만들어야합니다. –

+0

두 번째 이미지의 오른쪽에 투명 픽셀이있는 것으로 보입니다. 이로 인해 띄어쓰기 문제가 발생할 수 있습니다. [데모를 여기에서] (http://jsfiddle.net/q1ourw0q/). – showdev

+0

아마도 Outlook에는 현재 수행중인 작업을 허용하지 않는 렌더링 규칙이 있습니까? http://templates.mailchimp.com/development/css/outlook-conditional-css/ –

답변

0

기본적으로 인라인 태그이므로 공백이 있습니다. 부모를 위해 font-size: 0px;을 설정하여 빈 공간을 방지하거나 display: block;<img> (선택 사항)으로 설정할 수 있습니다. My solutionarticle about this behaviour