Als Anfang könnten Sie versuchen, alle Elemente mit *{margin: 0; padding: 0;} in Ihrem externen Stylesheet. Ich mache das immer beim Debuggen. Legen Sie dann den Rand/die Polsterung lokal für die einzelnen Elemente fest (wie Sie es bereits getan haben).
– Hauns TM
31. Januar 2014 um 7:07 Uhr
Tut mir leid, wenn das nicht relevant ist – ich bin HTML-Neuling –, aber ich hatte gerade einige Erfolge mit Margin <p style='margin-left:36.0pt'> Das habe ich herausgefunden, indem ich mir die E-Mail-Quelle angesehen habe, nachdem ich es so eingerichtet hatte, wie ich es wollte.
– SSlinky
23. August 2016 um 10:34
Monner
Wenn es um EDMs geht (Elektronische Direktwerbung), Outlook ist Ihr schlimmster Feind. Einige Versionen berücksichtigen das Auffüllen nicht, wenn der Inhalt einer Zelle die Zellenabmessungen vorgibt.
Der Ansatz, der Ihnen das Beste bringt konsistent Das Ergebnis bei allen E-Mail-Clients ist, dass leere Tabellenzellen als Auffüllung verwendet werden (ich weiß, der Horror), aber denken Sie daran, diese Tabellen mit einem leeren Bild der gewünschten Größe zu füllen, denn Sie haben es erraten, einige Versionen von Outlook berücksichtigen die Höhe/Höhe nicht. Breitendeklarationen leerer Zellen.
Macht EDM keinen Spaß? (Nein sind sie nicht.)
Danke für den Hinweis auf die Bilder, das wird auf jeden Fall funktionieren. Übrigens für diejenigen, die auf der Suche nach richtigen Bildern sind – placehold.it ist eine wirklich gute Quelle, z placeholdit.imgix.net/…
– GodblessStrawberry
9. November 2016 um 11:07 Uhr
Ich musste den Impuls unterdrücken, über dieses Thema abzustimmen, weil die Aussichten schlecht sind … aber gute Antwort, also +1
– GDY
16. November 2017 um 8:47 Uhr
Was ist ein EDM?
– Ismael
16. Januar 2018 um 17:40 Uhr
Übrigens – ich habe es geschafft, das Bild ohne Bild aufzulösen, indem ich „% Breite“ für td in der Tabelle verwendet habe
– Schacher
13. März 2018 um 0:43
@Craig1123 Das macht viel mehr Sinn als elektronische Tanzmusik. 😉
– Matt Cosentino
26. März 2019 um 23:21 Uhr
Sachi Cortes
Vermeiden Sie Polsterungen und Ränder in Newsletternignorieren einige E-Mail-Clients diese Eigenschaften.
Sie können „leer“ verwenden tr Und td wie vorgeschlagen (aber dies führt zu einer Menge HTML), oder Sie können es tun Verwenden Sie Rahmen mit derselben Rahmenfarbe wie der Hintergrund der E-Mail. also statt padding-top: 40px Sie können verwenden border-top: 40px solid #ffffff (vorausgesetzt, die Hintergrundfarbe der E-Mail ist #ffffff)
Ich habe diese Lösung in Gmail (und Gmail for Business), Yahoo Mail, Outlook Web, Outlook Desktop, Thunderbird, Apple Mail und mehr getestet. Soweit ich das beurteilen kann, ist die Verwendung von Grenzgrundstücken überall ziemlich sicher.
Beispiel:
<!-- With paddings (WON'T WORK IN ALL EMAIL CLIENTS!) -->
<table>
<tr>
<td style="padding: 10px 10px 10px 10px">
<!-- Content goes here -->
</td>
</tr>
</table>
<!-- Same result with borders (assuming a white background-color) -->
<table>
<tr>
<td style="border: solid 10px #ffffff">
<!-- Content goes here -->
</td>
</tr>
</table>
<!-- Same result using empty td/tr (A lot more html than using borders, messy on large emails) -->
<table>
<tr>
<td colspan="3" height="10" style="height: 10px; line-height: 1px"> </td>
</tr>
<tr>
<td width="10" style="width: 10px; line-height: 1px"> </td>
<td><!--Content goes here--></td>
<td width="10" style="width: 10px; line-height: 1px"> </td>
</tr>
<tr>
<td colspan="3" height="10" style="height: 10px; line-height: 1px"> </td>
</tr>
</table>
<!--
With tr/td every property is needed:
- "height" must be setted both as attribute and style, same with width.
- "line-height" must be setted because the default value may be greater than the wanted height.
- The " " is there because some email clients won't render empty columns.
- You can remove the "colspan" and still will work, but is cleaner, especially when inspecting the element in the browser's console.
-->
Darüber hinaus finden Sie hier eine hervorragende Anleitung zum Erstellen Responsive Newsletter ohne Medienanfragen. Die E-Mails funktionieren wirklich überall:
Bei Problemen mit der Verwendung von Rahmen in Outlook können Sie versuchen, dieses Snippet in Ihren E-Mail-Kopf einzufügen (Outlook unterstützt <head> Schild):
Outlook geht davon aus, dass sich die Ränder der Tabellenzellen nicht überlappen sollten, es sei denn, Sie verwenden border-collapse:collapse in den Tabellenstilen.
Habe es gerade in Outlook 365 (v16.0.12527) getestet und festgestellt, dass die Anwendung eines Rahmens auf meinen H2-Stil wie folgt aussieht: h2 { border-top: solid 100px #ffffff; } fügt zwar ein paar Pixel Rand hinzu (vielleicht 8?), aber nicht die 100 Pixel, die ich spezifiziere. Ich habe das viele Male mit verschiedenen Werten versucht, immer mit dem gleichen ~8px-Rand.
– Mike
8. März 2021 um 21:47 Uhr
Funktioniert nicht in Outlook. Man Outlook ist ein Stück Cr@p.
– MadMac
28. September 2021 um 23:50 Uhr
Die Rahmenstärke ist nur so dick wie der Container selbst in Outlook. Mit anderen Worten, wenn Sie a 100px Wenn Sie die Rahmendicke festlegen, zeigt Outlook nur so viel Rand an, wie für den Container des aktuellen Elements angezeigt werden kann. Für mich fühlt es sich an wie das alte IE-Box-Modell. Der Trick besteht darin, eine Höhe für das enthaltende Element anzugeben, normalerweise eine Tabelle oder ein TD für Outlook.
– Metro Schlumpf
27. Juli 2022 um 21:35 Uhr
Mukesh
Ich bin auf „Folgen“ umgestiegen und es hat bei mir funktioniert
Bitte geben Sie an, was geändert wurde. Zwingen Sie Benutzer nicht zur Verwendung von Diff-Tools.
– Bsalex
31. Mai 2018 um 22:23
Die Polsterung muss weitergehen <td>s Aus Gründen der Cross-E-Mail-Kompatibilität nicht <span>s.
– Nathan
16. September 2021 um 6:29 Uhr
Um HTML in einer E-Mail-Vorlage zu erstellen, bei der es sich um einen E-Mail-Empfänger/Newsletter handelt, wird Auffüllen/Ränder auf E-Mail-Clients nicht unterstützt. Sie können ein leeres GIF-Bild der Größe 1×1 nehmen und verwenden.
cellpadding An <table> ist unzuverlässig, genau wie cellspacing. Verwenden Sie am besten eine Polsterung <td>
– schwelgen
26. August 2016 um 14:10 Uhr
Subbu
Das Auffüllen funktioniert in Outlook nicht. Anstatt ein leeres Bild hinzuzufügen, können Sie einfach mehrere Leerzeichen verwenden(& nbsp;) vor Elementen/Texten zum Auffüllen nach links Zum Auffüllen oben oder unten können Sie ein Div hinzufügen, das nur Leerzeichen enthält(& nbsp;) allein. Das wird funktionieren!!!
cellpadding An <table> ist unzuverlässig, genau wie cellspacing. Verwenden Sie am besten eine Polsterung <td>
– schwelgen
26. August 2016 um 14:10 Uhr
Jacob
Ich hatte das gleiche Problem und habe es letztendlich tatsächlich verwendet border anstatt padding.
Wäre genial, wenn es funktionieren würde – wurde auf outlook.com nicht gelöst
– Niltoid
16. April 2018 um 18:53 Uhr
Scheint auf meiner Outlook-Version zu funktionieren. Danke Jacob!
– Ausstehende Rechnung
2. Dezember 2019 um 15:10 Uhr
14542400cookie-checkCSS-Padding funktioniert in Outlook nicht wie erwartetyes
Als Anfang könnten Sie versuchen, alle Elemente mit *{margin: 0; padding: 0;} in Ihrem externen Stylesheet. Ich mache das immer beim Debuggen. Legen Sie dann den Rand/die Polsterung lokal für die einzelnen Elemente fest (wie Sie es bereits getan haben).
– Hauns TM
31. Januar 2014 um 7:07 Uhr
Tut mir leid, wenn das nicht relevant ist – ich bin HTML-Neuling –, aber ich hatte gerade einige Erfolge mit Margin
<p style='margin-left:36.0pt'>Das habe ich herausgefunden, indem ich mir die E-Mail-Quelle angesehen habe, nachdem ich es so eingerichtet hatte, wie ich es wollte.– SSlinky
23. August 2016 um 10:34