2015-04-14 5 views
2

Я просмотрел многие похожие вопросы по этой проблеме и попробовал многие принятые ответы, но я все еще получаю нежелательные пространства строк. Как и многие из вопросов, я создаю почтовый шаблон, поэтому мне нужно использовать вложенные таблицы, чтобы получить не только структуру, которую я хочу, но и правильно ее обрабатывать по электронной почте.Удалите расстояние между рядами строк

Решения, которые я пробовал, не работало:

  1. CELLSPACING = 0
  2. cellpading = 0
  3. границы коллапс: крах
  4. границы разнос: 0
  5. края : 0 0 0 0
  6. style = "display: block" для моего изображения

Ничего из этого, похоже, даже не имеет значения, я не могу избавиться от пространств строк. Это происходит в Chrome/IE/Firefox.

enter image description here

<html lang="en"> 
    <head> 
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
     <title> 
      Title 
     </title> 
     <style type="text/css"> 
     a:hover { text-decoration: none !important; } 
     .header h1 {color: #055d90; font: normal 25px Georgia, Times, serif; margin: 0; font-weight: bold; padding: 0 0 0px 0; line-height: 39px; margin-top: 0;} 
     .header p {color: #cf373e; font: normal 17px Georgia, Times, serif; margin: 0; padding: 0; line-height: 12px; font-style: italic;} 
     .custinfo h1 {color: #FFFFFF; font: normal 25px Tahoma, Times, serif; background-color: #FF8000; padding: 10px 0 10px 0;} 
     .custinfo h2 {color: #FFFFFF; font: normal 15px Tahoma, Times, serif; background-color: #707070; padding: 0 0 0 0;} 
     .table {border-collapse: collapse;} 
     .table td {margin: 0; padding: 0; display:block;} 
     </style> 
    </head> 
    <body style="margin: 0; padding: 0;"> 
     <table align="left" width="100%" class="table"> 
      <tr> 
      <!--header--> 
       <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin-top: 0;"> 
        <tr> 
         <td valign="top"> 
          <img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100"> 
         </td>      
        </tr> 
        <tr> 
         <td valign="top" align="middle" class="header" width="100%"> 
          <h1>Order</h1> 
         </td> 
        </tr> 
       </table> 
       <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;"> 
        <tr class="custinfo"> 
         <td width="50%"> 
          <h1>[DISTRIBUTOR NAME]</h1>       
         </td> 
         <td align="middle"> 
          <h1>[ORDER DATE]</h1> 
         </td> 
        </tr>     
       </table> 
       <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;"> 
        <tr class="custinfo"> 
         <td> 
          <h2>PO# [PO NUMBER]</h2>          
         </td> 
         <td > 
          <h2>Customer [COMPANY NAME]</h2> 
         </td> 
         <td > 
          <h2>Total Order [TOTAL ORDER]</h2> 
         </td> 
        </tr> 
        <tr class="custinfo" style="margin:0"> 
         <td> 
          <h2>PO# [PO NUMBER]</h2>          
         </td> 
         <td> 
          <h2>Customer [COMPANY NAME]</h2> 
         </td> 
         <td> 
          <h2>Total Order [TOTAL ORDER]</h2> 
         </td> 
        </tr> 
       </table> 
      </tr> 
     </table> 
    </body> 
</html> 
+0

добавления утеплитель: 0 помощь? Из предоставленного вами css я не видел явной инициализации заполнения. Probaby p [добавление - это то, что добавляет пространство – Sai

+0

Я просто понял, что это было. Когда я создал дополнительные стили css для заголовков custinfo, я не добавил поля: 0 часть – JWiley

ответ

4

Вы должны предотвратить h1, h2 элементы сворачивания полей.

h1, h2 { 
    margin: 0; 
} 

a:hover { 
 
    text-decoration: none !important; 
 
} 
 
.header h1 { 
 
    color: #055d90; 
 
    font: normal 25px Georgia, Times, serif; 
 
    margin: 0; 
 
    font-weight: bold; 
 
    padding: 0 0 0px 0; 
 
    line-height: 39px; 
 
    margin-top: 0; 
 
} 
 
.header p { 
 
    color: #cf373e; 
 
    font: normal 17px Georgia, Times, serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 12px; 
 
    font-style: italic; 
 
} 
 
.custinfo h1 { 
 
    color: #FFFFFF; 
 
    font: normal 25px Tahoma, Times, serif; 
 
    background-color: #FF8000; 
 
    padding: 10px 0 10px 0; 
 
} 
 
.custinfo h2 { 
 
    color: #FFFFFF; 
 
    font: normal 15px Tahoma, Times, serif; 
 
    background-color: #707070; 
 
    padding: 0 0 0 0; 
 
} 
 
.table { 
 
    border-collapse: collapse; 
 
} 
 
.table td { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
} 
 
h1, 
 
h2 { 
 
    margin: 0; 
 
}
<table align="left" width="100%" class="table"> 
 
    <tr> 
 
    <!--header--> 
 
    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin-top: 0;"> 
 
     <tr> 
 
     <td valign="top"> 
 
      <img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td valign="top" align="middle" class="header" width="100%"> 
 
      <h1>Order</h1> 
 

 
     </td> 
 
     </tr> 
 
    </table> 
 
    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;"> 
 
     <tr class="custinfo"> 
 
     <td width="50%"> 
 
      <h1>[DISTRIBUTOR NAME]</h1> 
 
     </td> 
 
     <td align="middle"> 
 
      <h1>[ORDER DATE]</h1> 
 

 
     </td> 
 
     </tr> 
 
    </table> 
 
    <table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;"> 
 
     <tr class="custinfo"> 
 
     <td> 
 
      <h2>PO# [PO NUMBER]</h2> 
 
     </td> 
 
     <td> 
 
      <h2>Customer [COMPANY NAME]</h2> 
 

 
     </td> 
 
     <td> 
 
      <h2>Total Order [TOTAL ORDER]</h2> 
 

 
     </td> 
 
     </tr> 
 
     <tr class="custinfo" style="margin:0"> 
 
     <td> 
 
      <h2>PO# [PO NUMBER]</h2> 
 
     </td> 
 
     <td> 
 
      <h2>Customer [COMPANY NAME]</h2> 
 

 
     </td> 
 
     <td> 
 
      <h2>Total Order [TOTAL ORDER]</h2> 
 

 
     </td> 
 
     </tr> 
 
    </table>

Ссылка: Margin collapsing

+0

Да, это было в моих атрибутах custinfo h1 и h2. – JWiley

1

Добавить поле: 0 в вашей h2. Если вы не определяете маркер 0, маржа по умолчанию применяется к таблицам стилей пользовательских агентов.

JSFiddle Ссылка

https://jsfiddle.net/aLast0qs/ 

код Css

.custinfo h2 { 
    color: #FFFFFF; 
    font: normal 15px Tahoma, Times, serif; 
    background-color: #707070; 
    padding: 0 0 0 0; 
    margin: 0; 
} 
Смежные вопросы