Dopasowanie stylu niestandardowego w programie Outlook

Próbuję utworzyć niestandardowy styl kodu w programie Outlook (z ciemnym tłem). Mam go prawie tak, jak chcę, ale jeśli to możliwe, chciałbym dopełnić tekst.

Nie widzę rzeczywistego ustawienia Padding, ale dodając ramkę, pomyślałem, że mogę osiągnąć ten sam efekt:

wprowadź opis zdjęcia tutaj

Kiedy jednak idę wysłać wiadomość e-mail, wygląda to tak dla osób, które ją otrzymały (oraz w moich wysłanych elementach):

wprowadź opis zdjęcia tutaj

Czy ktoś wie, dlaczego tak się dzieje i czy istnieje sposób, aby to rozwiązać za pomocą obramowania lub innej techniki (fajne byłoby wypełnienie)?

Dzięki

microsoft-outlook microsoft-office microsoft-outlook-2013

— Adam Plocher
źródło

Od Dlaczego moje marże nie działają w Outlook.com? :

Outlook.com nie obsługuje już następujących właściwości CSS: margines, margines górny, margines prawy, margines dolny, margines lewy.

Zastępowanie marginesów wypełnianiem znaczników akapitu działa dobrze w programie Outlook.com, ale klienty Microsoft na komputerach nie radziły sobie tak dobrze: Outlook 2007/2010/2013 nie obsługuje wypełniania elementów na poziomie bloku.

Marginesy działają więc w wersji na komputery, ale wypełnienie nie. I w Outlook.com padding działa, ale nie marginesy. Rozwiązanie marginesów lub wypełniania jest zatem możliwe tylko wtedy, gdy ty i twoje odbiorniki używacie tylko jednego z wariantów programu Outlook.

W ostateczności artykuł zaleca stosowanie tabel jako kompleksowego rozwiązania:

Użyj <TD>i zamień margines na wypełnienie

Umieszczenie każdego bloku tekstu lub obrazu w jego własnej <td>komórce - wraz z wbudowanym wypełnieniem CSS - zapewnia najlepsze wyniki dla głównych klientów e-mail. Podczas gdy purystycy zajmujący się tworzeniem stron internetowych słusznie wahają się, aby przekłamać swoje e-maile za pomocą nie-semantycznych znaczników, ta metoda działała dla nas dobrze przez lata. I podczas gdy wypełnienie nie działa tak samo jak margines, wykonuje zadanie. Zachowaj szczególną ostrożność podczas korzystania z ramek, ponieważ musisz zagrać ze stołami zagnieżdżonymi, aby uzyskać pożądany efekt, polegając wyłącznie na wypełnieniu.

— harrymc
źródło

Dziękuję Ci. Kilka pytań: 1) czy istnieje sposób edycji CSS dla moich stylów w Outlooku? Bardzo dobrze czuję się w CSS, ale nie tak bardzo w Outlooku. Nie widzę sposobu edytowania bazowego CSS w oknie dialogowym Modyfikuj styl. 2) Czy mogę edytować szablon HTML (dla rozwiązania <td>) dla stylu w Outlooku? 3) (tak naprawdę to nie pytanie ...) Nadal nie mogę zrozumieć, dlaczego moja ramka (z tym samym kolorem, który wygląda jak „padding”) nie działa zaraz po wysłaniu… argh. Dzięki, myślę, że postawiłeś mnie na właściwej drodze ...

— Adam Plocher

Outlook obsługuje coś w przybliżeniu równoważnego HTML kompatybilnemu z IE5, więc nie chciałbym się zbytnio zachowywać. Lepsze wykorzystanie tylko wbudowanego CSS, a tabele są nadal najbardziej spójną funkcją we wszystkich klientach e-mail. Aby zapoznać się z pełną historią tego, co działa lub nie we wszystkich klientach e-mail, zobacz The Ultimate Guide to CSS . Witryna Premailer może pomóc, analizując czysty HTML, aby przekonwertować wszystko na wbudowane style i podać listę ostrzeżeń CSS dotyczących niebezpiecznych rzeczy i dla których klientów e-mail.

— harrymc

Lub możesz użyć MailChimp do zaprojektowania swoich e-maili bezpośrednio w ich edytorze internetowym, a dołoży wszelkich starań, aby wyglądał dobrze we wszystkich klientach pocztowych. Jest bezpłatny dla 12 000 e-maili do 2000 subskrybentów.

— harrymc