캠페인 모니터를 사용하여 이메일을 보내려면 세로 정렬 표의 텍스트 위 5px 공백을 제거 할 수있는 방법이 있습니까?

Question

대량 이메일을 보내면 모든 것이 테이블 안에 있습니다. 테이블에 영향을 미치는

CSS :

.title { 
vertical-align: top; 
} 

HTML :

<table width="580" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td class="title" align="left" width="440" valign="top"> 
<h2><singleline label="Title">Enter your title</singleline></h2> 
<p><multiline label="Description">Description</multiline></p> 


</td> 

<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td> 

<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td> 
</tr> 
<tr> 
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td> 
</tr> 
</table> 

나는 테이블의 상단과 같은 높이로 태그 안의 텍스트가 필요합니다. 현재/images/001/jpg는 동일하지만 텍스트는 표의 가장자리에서 5 픽셀 아래에 있습니다.

CSS에서 vertical-align : top을 사용했으며 border-spacing : none, border-collapse : collapse 및 border : none을 시도했습니다. 그들 중 누구도 문제를 해결하지 못했습니다.

여백 위쪽 사용 : -5px; 이 태그는 표준 브라우저 테스트에서 문제를 해결했지만 일부 이메일 클라이언트에서는 지원되지 않았습니다.

Answer 1

캠페인 모니터의 장미입니다. 무엇 완전히 명확하지 것은 캠페인 모니터 편집기로 가져올 때 < 만일 Singleline > 및 < 여러 > 태그 ... < 페이지 > 콘텐츠 </P >

로 변환하는 것입니다. 이 <p> 태그는이 여분의 패딩을 생성합니다 (here's an example).

이것을 피하는 가장 쉬운 방법은 p {margin : 0; 패딩 : 0; }를 CSS 스타일에 적용합니다.

이 문제가 해결되기를 바랍니다. 이와 같은 질문에 대답하려면 we have a forum을 참고하십시오. 앞으로 템플릿 코드를 게시하십시오.

여기에 기고 한 모든 분들께 감사드립니다.

Answer 2

텍스트에 대한 TD에

valign="top" 

를 넣습니다. 이메일 클라이언트가 CSS를 인식하지 못하면 표준 HTML 속성을 인식해야합니다.

또한 문제가 해결되지 않으면 Q를 편집하고 여기에서 사용하는 "title"CSS 정의에 대한 정의를 추가 할 수 있습니까?

Answer 3

H2 태그 안의 텍스트를 참조한다고 가정합니다.

는 <h2>

.noPad { 
padding-top: 0px; 
} 

에 대한 클래스를 만들거나 H2를 사용하고 단지 SPAN 또는 DIV 요소를 사용하지 마십시오.

Answer 4

그냥 여백/패딩 반대로 텍스트의 줄 높이가 될 수 - 확인 그뿐만 아니라

Answer 5

로스의 주장은 대부분의 시간을 충분하지만, Gmail에서 삽입 된 페이지를 잎 헤더 스타일을 제거 Gmail의 기본 여백 상단과 하단에 태그가 있습니다.

이 문제를 해결할 수있는 방법은 여러 줄 태그 내에 div 태그를 추가하는 것입니다. 이렇게하면 Campaign Monitor가 p 태그로 콘텐츠를 래핑하지 못하게됩니다.

<multiline> 
    <div> 
     Your Content Goes Here. 
    </div> 
</multiline>