Вертикальный отступ в Html макете рассылки в outlook

@Tanais2010 · Регистрация: 25.07.2016

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите пожалуйста новичку, в чем проблема.
Задача, вставить картинки с номерами 1, 2, 3 возле текста в макете для html рассылки.
Вроде все выровнял padding-oм, везде замечательно работает, только на рабочем outlook почему-то к картинкам с цифрами padding применяется, а к тексту нет.... и текст немного ползет вверх
1) фото как должно быть
2) фото как выходит в outlook
Ну и код для конкретно этой части

Не судите строго, это первая попытка сождать подобный макет.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<table width="50%" height="200" border="0" cellspacing="0" cellpadding="0" align="reght" style="margin:0; padding:0">
    <tr>
        <td valign="top" style="padding:30px 5px 15px 10px">
            <img  src="http://www.termaheat.pl/sites/default/files/_content/termaheat.pl/btn_02.png" width="32" height="31" alt="Dwa" border="0" align="left" style="displey: block"/>
        </td>
        <td valign="middle" style="padding: 0 10px 10px 0;">    
            <p style="text-decoration: none; font-family: Arial, sans-serif; font-size: 12pt; color: #6b6b6b; font-weight:  900;">PRZETESTUJ I OCEŃ</p>
            <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family: Arial, sans-serif; font-size: 10pt; color: #555555; line-height: 1.5; text-decoration: none;">Sprawdź nasz produkt i oceń jego działanie. Jeśli będziesz zadowolony z pracy naszego młota T240, zapraszamy do zakupu całego zestawu w promocyjnej cenie!</p>
        </td>
    </tr>
</table>

@evgeniyd · 25.07.2016, 15:19

Здравствуйте. Опечатались - "display", а не "displey"

Сообщение от Tanais2010

CSS
1
style="displey: block"

Можно весь код?

@Tanais2010 · 25.07.2016, 15:33 **[ТС]**

Добрый день, вот такое творение...оговорюсь еще раз, прошу не судить ...первый раз...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
        <title>Wypożyczenia młota</title>
    </head>
        <body style="padding: 0; margin: 0">
        <!-- Wrapper -->
        <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="-moz-hyphens:none; -webkit-hyphens:none;">
         <tr>
           <td width="100%" valign="top" bgcolor="#ffffff" >
             <table cellpadding="0" cellspacing="0" border="0" width="580">
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="0" border="0" width="580">
                            <tr>
                                <td>
                                    <a href="http://www.termamax.pl/pl/dokumenty/maxt240_wbijanie_rur"  style="border:0;margin:0;padding:0;outline:0;text-decoration:none;">
                                    <img src="http://www.termaheat.pl/sites/default/files/_content/termaheat.pl/img_top_title.jpg" width="580" height="480" alt="Młot do wbijania rur stalowych" style="-ms-interpolation-mode:bicubic; border:0;margin:0;outline:0;text-decoration:none;display:block;"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table bgcolor="#f1f1f1" width="580" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td style="vertical-align:top ; padding-top: 25px;">
                                    <table width="50%" height="200" border="0" cellspacing="0" cellpadding="0" align="left" >
                                        <tr>
                                          <td valign="top" style="padding:30px 5px 15px 10px">
                                                <img src="http://www.termaheat.pl/sites/default/files/_content/termaheat.pl/btn_01.png" width="32" height="31" alt="Jeden" border="0" style="displey: block"/>
                                             </td>
                                          <td valign="middle" style="padding: 0px 10px 0 0px;">
                                              <p style= "text-decoration: none; font-family: Arial, sans-serif; font-size: 12pt; color: #6b6b6b; font-weight:  900;">WYPOŻYCZ!</p>
                                              <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family: Arial, sans-serif; font-size: 10pt; color: #555555; line-height: 1.5; text-decoration: none;">
                                               Zapraszamy do wypożyczenia młota do wbijania rur T240 w cenie <strong>600 PLN</strong> netto za dzień. Młot jest przeznaczony do wbijania rur stalowych o średnicach od 219 mm do 711 mm.
                                            </p></td>
                                        </tr>
                                    </table>
                                    <table width="50%" height="200" border="0" cellspacing="0" cellpadding="0" align="reght" style="margin:0; padding:0">
                                        <tr>
                                            <td valign="top" style="padding:30px 5px 15px 10px">
                                                <img  src="http://www.termaheat.pl/sites/default/files/_content/termaheat.pl/btn_02.png" width="32" height="31" alt="Dwa" border="0" align="left" style="displey: block"/>
                                             </td>
                                              <td valign="middle" style="padding: 0 10px 10px 0;">  
                                              <p style="text-decoration: none; font-family: Arial, sans-serif; font-size: 12pt; color: #6b6b6b; font-weight:  900;">PRZETESTUJ I OCEŃ</p>
                                              <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family: Arial, sans-serif; font-size: 10pt; color: #555555; line-height: 1.5; text-decoration: none;">
                                               Sprawdź nasz produkt i oceń jego działanie. Jeśli będziesz zadowolony z pracy naszego młota T240, zapraszamy do zakupu całego zestawu w promocyjnej cenie!
                                            </p></td>
                                         </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td  style="vertical-align: top ;padding-bottom: 50px">
                                    <table width="50%" height="150" border="0" cellspacing="0" cellpadding="0" align="left" style="margin:0; padding:0">
                                        <tr>
                                             <td valign="top" style="padding:20px 5px 15px 10px">
                                                <img  src="http://www.termaheat.pl/sites/default/files/_content/termaheat.pl/btn_03.png" width="32" height="31" alt="Trzy" border="0" align="left" style="displey: block"/>
                                             </td>
                                              <td valign="middle" style="padding-bottom: 20px; ">                                             
                                              <p style="-moz-hyphens:none;-webkit-hyphens:none; text-decoration: none; font-family: Arial, sans-serif; font-size: 12pt; color: #6b6b6b; font-weight: 900;">KUP W SPECJALNEJ CENIE</p>
                                              <p style="-moz-hyphens:none;-webkit-hyphens:none; margin:0; font-family: Arial, sans-serif; font-size: 10pt; color: #555555; line-height: 1.5; text-decoration: none; padding-right: 10px;">
                                               Tylko teraz lub do wyczerpania zapasów zestaw MŁOT T240 w cenie <strong>43.500 PLN*</strong>.
                                            </p></td>
                                         </tr>
                                    </table>
                                    <table width="50%" height="150" border="0" cellpadding="0" cellspacing="0" align="reght" style="margin:0; padding:0">
                                        <tr>
                                            <td valign="middle" style="padding:20px 10px 5px 10px">
                                                <img src="http://www.termaheat.pl/sites/default/files/_content/termaheat.pl/img_mlot_maly.png" width="246" height="112" alt="mlot" style="displey: block"/></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <table width="580" height="150" border="0" cellpadding="15px" cellspacing="0" bgcolor="#ffffff" style="margin:0; padding:0">
                        <tr style="text-align:left;vertical-align:top; padding: 15px;">
                            <td>
                                <p style="-moz-hyphens:none;-webkit-hyphens:none; Margin:0; font-family: Arial, sans-serif; font-size: 8pt; color:#555555; padding-left: 20px; line-height: 2; text-decoration: none;" >>  Promocja ograniczona do końca 2016 roku lub do wyczerpania zapasów.</p>
                                <p style="-moz-hyphens:none;-webkit-hyphens:none; Margin:0;font-family: Arial, sans-serif; font-size: 8pt; color:#555555; padding-left: 20px; line-height: 2;text-decoration: none;">>  *cena za zestaw do wbijania rur o średnicach 219, 273, 323, 404, 508 [mm], cena nie zawiera sprężarki.</p>
                            </td>
                        </tr>
                    </table>
                </tr>
        </table>
     </td>
    </tr>
    </table>
    <!-- End Wrapper -->
    </body>
</html>

@evgeniyd · 25.07.2016, 15:34

"right"

CSS
1
align="reght"

@Tanais2010 · 25.07.2016, 17:49 **[ТС]**

Спасибо, подправил

Добавлено через 2 часа 6 минут
Как разобраться с основной проблемой не знаю только

@evgeniyd · 25.07.2016, 17:54

Сообщение от Tanais2010

Как разобраться с основной проблемой не знаю только

А, если применить?

CSS
1
 table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

@Tanais2010 · 26.07.2016, 08:21 **[ТС]**

К сожалению не помогает(((

@smaqy · 26.07.2016, 09:19

Попробуйте так

HTML5
1
2
3
<table width="50%" border="0" cellspacing="0" cellpadding="0" align="right" style="margin:0; padding:0">
    <tr>
        <td valign="top" style="padding:13px 5px 0 10px">...

@Tanais2010 · 26.07.2016, 09:37 **[ТС]**

Не хочет

, везде все отличто, в Outlook как и было
Outlook - это нечто...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@Tanais2010 0 / 0 / 0 Регистрация: 25.07.2016 Сообщений: 5
	25.07.2016, 17:49 [ТС]
	Спасибо, подправил Добавлено через 2 часа 6 минут Как разобраться с основной проблемой не знаю только 0

@Tanais2010 0 / 0 / 0 Регистрация: 25.07.2016 Сообщений: 5
	26.07.2016, 08:21 [ТС]
	К сожалению не помогает((( 0

@Tanais2010 0 / 0 / 0 Регистрация: 25.07.2016 Сообщений: 5
	26.07.2016, 09:37 [ТС]
	Не хочет, везде все отличто, в Outlook как и было Outlook - это нечто... 0