Форматирование абзацев для электронных писем в формате html

#html #css #html-email

#HTML #css #html-электронная почта

Вопрос:

У меня есть 2 последовательных абзаца в электронном письме в формате html. Мне не нужно, чтобы между двумя абзацами не было пробелов, но мне нужно 30 пикселей пространства в верхней части 1-го абзаца и в нижней части второго абзаца.

Я могу удалить пробелы между двумя абзацами, используя:

 p{
   padding:0;
   margin:0;
 }

Для пространства в верхней и нижней части абзаца я могу использовать

  p{
       margin-top: 30px;
       margin-bottom: 30px;
    }

Все это отлично работает в Outlook и браузерах. Но когда я использую его для entourage (электронная почта MAC) / gmail, пробел между абзацами по-прежнему сохраняется.

Как я могу избавиться от пробела?

1. Можете ли вы использовать встроенный CSS, я имею в виду, что вы можете это сделать, <p style="padding:0;margin:0;">Content</p> .

2. у вас могут быть разные стили в первом и втором абзацах.

3. Да, я действительно использовал это. Но это не оставляет места вверху и внизу. Как мне добиться этого представления таблица?

Ответ №1:

Большинство веб-почтовых клиентов (hotmal, gmail) не будут учитывать стили, определенные внутри <style> тега, просто потому, что они просто отбрасывают (почти) все, что определено внутри раздела head. Вы должны сделать свои стили встроенными.

Ответ №2:

Это те редкие случаи, когда использование встроенного css имеет смысл

это должно быть в вашем css

 p{
   padding:0;
   margin:0;
 }

и в вашем встроенном

 style='margin-top: 30px;'

в css есть хитрости, позволяющие заставить его работать, но я не уверен, поддерживается ли он во всех браузерах
вам придется погуглить это.

пример :

 div:firstchild  p {
  ... rules..
}

будет выбран первый дочерний элемент

Ответ №3:

попробуйте этот способ:

 <style type="text/css">
p{background-color:green;}
div p { margin-top:30px; }
p p{ margin-bottom :30px; }
</style>

<div align="center"></div>
<p> first paragraph </p>
<p>Second Paragraph </p>

Рабочая демонстрация

Ссылка :

смежный селектор

Ответ №4:

Вы можете упаковать свои пункты:

 <div>
  <p>top paragraph</p>
  <p>bottom paragraph</p>
</div>

И добавьте в свой CSS:

 div
{
   padding: 30px 0;
}