CSS in E-Mails: Was funktioniert und was nicht

Kurz gesagt: Setzen Sie alles, was für die Darstellung zwingend ist, als Inline-Style, bauen Sie das Layout aus Tabellen, und nutzen Sie das style-Element nur für Media Queries und Verbesserungen, die ohne Schaden entfallen dürfen. Prüfen Sie jede Eigenschaft, die Sie nicht täglich in E-Mails verwenden, vorher auf caniemail.com. Die Seite sammelt Testergebnisse pro Eigenschaft und Client und weist für jede einen geschätzten Unterstützungsanteil aus.

Was caniemail.com für die wichtigsten Eigenschaften schätzt

Die folgende Tabelle gibt die Schätzwerte wieder, die ich am 7. Oktober 2026 auf den jeweiligen Seiten abgelesen habe. „Voll“ bedeutet, dass der Client die Eigenschaft unterstützt; „teilweise“ heißt, dass es Einschränkungen oder Fehler gibt. Die Prozentwerte beziehen sich auf die Clients, die caniemail erfasst, nicht auf Ihre Empfängerliste.

Die Tabelle erklärt, warum die alten Faustregeln noch gelten, auch wenn sie ungenauer sind, als man denkt. Fast nichts ist überall voll unterstützt. Was für Sie zählt, ist die Frage, ob die Clients Ihrer Leser dazugehören und was dort passiert, wenn die Eigenschaft ausfällt.

Inline-Styles oder style-Element?

Inline-Styles: die sichere Basis

<p style="color: #333333; font-size: 16px; line-height: 1.5;">
  Text mit Inline-Styles
</p>

Inline-Styles kommen überall an. Ihr Preis ist ein aufgeblähter Quelltext, in dem sich derselbe Stil an vielen Stellen wiederholt. Genau deshalb schreibt niemand sie von Hand, sondern lässt sie beim Build erzeugen.

Das style-Element im Head

<head>
  <style>
    .text-body {
      color: #333333;
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p class="text-body">Text mit Klasse</p>
</body>

Mit rund 78 Prozent voller oder teilweiser Unterstützung ist das style-Element weit verbreitet, aber nicht überall nutzbar. Die Maizzle-Dokumentation nennt zwei Beispiele: Gmail auf Android mit einer IMAP-Adresse ignoriert style-Elemente komplett, und manche ältere Outlook-Versionen beachten nur die erste Klasse eines class-Attributs. Außerdem entfernt Gmail Klassennamen mit Sonderzeichen wie Doppelpunkt oder Schrägstrich, weshalb Werkzeuge solche Selektoren umschreiben (aus sm:text-lg wird sm-text-lg).

Beides kombinieren

Setzen Sie kritische Eigenschaften inline und legen Sie Media Queries sowie Verbesserungen in das style-Element. Ein CSS-Inliner erledigt die Umwandlung im Build, sodass Sie im Quelltext trotzdem mit Klassen arbeitest. Wie das in der Praxis aussieht, zeigt unser Vergleich Maizzle und MJML: Maizzle inlinet Tailwind-Klassen in style-Attribute und wandelt moderne CSS-Syntax in einfachere um.

Typografie

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
color: #333333;
line-height: 1.5;
text-align: left;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;

Diese Eigenschaften sind in allen großen Clients verbreitet. Bleiben Sie bei px für font-size, weil em und rem je nach Client abweichen können, und setzen Sie die Zeilenhöhe möglichst als Zahl oder in px. Verlassen Sie sich bei font-weight auf normal und bold.

Web-Schriften

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

<p style="font-family: 'Roboto', Arial, sans-serif;">
  Eigene Schrift mit Fallback
</p>

Eigene Schriften funktionieren dort, wo der Client Web-Schriften lädt, etwa in Apple Mail und auf iOS. Andere Clients greifen auf den Fallback zurück. Wählen Sie deshalb eine Ersatzschrift mit ähnlichen Maßen, damit Umbrüche und Buttons nicht kippen, wenn die Schrift fehlt.

Box-Modell: Abstände, Breiten, Höhen

Padding auf Tabellenzellen

<td style="padding: 20px;">
  Inhalt mit Innenabstand
</td>

<!-- oder einzelne Seiten -->
<td style="padding-top: 20px; padding-bottom: 10px;">
  Inhalt
</td>

Innenabstand an td ist der verlässlichste Weg. Die Maizzle-Dokumentation erinnert an einen Grund dafür: Klassisches Outlook unterstützt kein CSS-Padding an Inline-Elementen wie a, weshalb ihre Button-Komponente dort mit mso-Hilfsmitteln arbeitet.

Margin sparsam einsetzen

<!-- statt Margin an der Überschrift -->
<td style="padding-bottom: 20px;">
  <h1 style="margin: 0;">Überschrift</h1>
</td>

Außenabstände verhalten sich zwischen Clients uneinheitlich. Legen Sie den Abstand lieber in eine umgebende Zelle und setzen Sie den Margin des Inhalts auf null.

Breite, max-width und Höhe

<table role="presentation" width="100%" style="max-width: 600px;">
  <tr>
    <td>Inhalt</td>
  </tr>
</table>

Laut caniemail ist max-width fast überall nutzbar, mit einer Besonderheit bei Outlook: Je nach Version gilt es dort nur auf Tabellen oder nicht auf Tabellen. Setzen Sie die Eigenschaft deshalb zusammen mit einem width-Attribut auf die Tabelle selbst und prüfen Sie das Ergebnis in den Outlook-Versionen Ihrer Zielgruppe. Feste Höhen vermeiden Sie am besten, weil Inhalte je nach Schrift und Zeilenumbruch unterschiedlich hoch werden.

Hintergründe

Hintergrundfarbe

Eine Hintergrundfarbe an Tabelle oder Zelle ist der zuverlässigste Weg, ob als background-color oder über das bgcolor-Attribut. Setzen Sie sie immer auch dann, wenn Sie ein Bild darüberlegen, damit der Text lesbar bleibt, wenn das Bild nicht lädt.

Hintergrundbilder

<!-- Hintergrundbild mit VML-Fallback für Outlook -->
<!--[if gte mso 9]>
<v:rect style="width:600px;height:300px;" stroke="false" fill="true">
<v:fill type="tile" src="image.jpg" />
<v:textbox>
<![endif]-->

<div style="background-image: url('image.jpg'); background-color: #333333;">
  Inhalt
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Caniemail schätzt background-image auf gut 72 Prozent volle und knapp 19 Prozent teilweise Unterstützung. Die Anmerkungen dort sind aufschlussreich: In Outlook funktionieren Hintergründe über VML, bei Nicht-Google-Konten in Gmail fehlen sie, und Gmail kann style-Attribute oder style-Elemente mit einer url() komplett entfernen. Planen Sie das Bild deshalb als Dekoration ein, nicht als Träger des Textes.

Rahmen und abgerundete Ecken

Einfache Rahmen wie border: 1px solid #cccccc sind unproblematisch. Bei border-radius liegt die geschätzte Unterstützung bei etwa 68 Prozent voll und knapp 15 Prozent teilweise. Für Outlook nennt caniemail den VML-Weg über RoundRect und verweist auf das Werkzeug buttons.cm. Wenn eckige Buttons in Outlook für Sie in Ordnung sind, sparen Sie sich den Aufwand, und entscheiden Sie das für jedes Projekt neu.

Layout: Tabellen statt flex, grid, position und float

Moderne Layoutwerkzeuge sind in E-Mails nur teilweise nutzbar. Für display: flex und display: grid schätzt caniemail jeweils 78 Prozent volle und knapp 5 Prozent teilweise Unterstützung, mit dem Hinweis, dass sie bei Nicht-Google-Konten in Gmail nicht funktionieren (bei flex fehlt außerdem inline-flex). Bei position sind es nur gut 29 Prozent volle und 51 Prozent teilweise Unterstützung, wobei je nach Client nur einzelne Werte funktionieren. Das reicht nicht für ein Layout, das überall halten soll.

Die robuste Lösung bleibt ein Tabellenraster. Für das, was früher mit float gelöst wurde, nennt caniemail eine einfache Alternative: Die Elemente table und img können über das align-Attribut einen ähnlichen Effekt erzielen.

<!-- statt float: align-Attribut an img oder table -->
<img src="logo.png" width="120" height="40" alt="Firmenlogo" align="left" style="display: block;">

Media Queries

@media screen and (max-width: 600px) {
  .mobile-full {
    width: 100% !important;
    display: block !important;
  }
  .mobile-hide {
    display: none !important;
  }
  .mobile-text-center {
    text-align: center !important;
  }
}

@media (prefers-color-scheme: dark) {
  .dark-bg {
    background-color: #1a1a1a !important;
  }
}

Caniemail schätzt @media auf gut 39 Prozent volle und gut 41 Prozent teilweise Unterstützung. Anders als oft behauptet, ist sie also nicht auf wenige Clients beschränkt, aber auch nicht überall gleich zuverlässig. Bauen Sie Ihr Layout so, dass es ohne Media Queries lesbar bleibt (einspaltig oder mit fester, schmaler Breite), und nutzen Sie sie, um es zu verbessern. Das !important brauchen Sie, weil Inline-Styles sonst Vorrang haben. Zum Dunkelmodus finden Sie mehr im Leitfaden zum Dark Mode.

CSS-Reset für E-Mails

<style>
  /* Schriftgröße nicht automatisch anpassen */
  body, table, td, p, a, li {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Tabellenabstände entfernen */
  table, td {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }

  /* Bildränder und Lücken entfernen */
  img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    display: block;
    outline: none;
    text-decoration: none;
  }

  /* Body zurücksetzen */
  body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

Der Reset verhindert, dass Clients Schriftgrößen eigenmächtig anpassen, entfernt Tabellenabstände und sorgt dafür, dass Bilder keine Lücken und Ränder bekommen. Die mso-Eigenschaften betreffen nur Outlook und werden von anderen Clients ignoriert.

CSS-Inlining im Build

Diese Werkzeuge wandeln eingebettete Styles in Inline-Styles um:

• Juice: Node.js-Bibliothek für CSS-Inlining.
• Premailer: Online-Werkzeug und Ruby-Gem.
• MJML: Inlinet beim Kompilieren. Mehr dazu im Vergleich von MJML und React Email.
• Maizzle: Inlinet Tailwind-Klassen und schreibt riskante Selektoren um.

CSS-Probleme debuggen

1. Prüfen Sie zuerst die Inline-Styles. Fehlende oder falsche Inline-Styles sind die häufigste Ursache.
2. Sehen Sie bei caniemail nach. Suchen Sie die Eigenschaft und lesen Sie die Anmerkungen zu dem Client, in dem es hakt.
3. Testen Sie in Outlook und mit einem Nicht-Google-Konto in Gmail. Wenn es dort hält, hält es meistens auch anderswo.
4. Vereinfachen Sie. Entfernen Sie CSS, bis das Problem verschwindet, und fügen Sie es dann schrittweise wieder hinzu.
5. Beachten Sie die Reihenfolge. In Outlook für Windows verzeichnet caniemail Fehler, wenn das style-Element erst hinter den Teilen deklariert wird, die seine Regeln brauchen. Setzen Sie es also in den Head, nicht mitten in den Body.

Für die finale Prüfung brauchen Sie echte Vorschauen. Wie sich Litmus und Email on Acid dabei unterscheiden und was sie kosten, steht im Vergleich der beiden Testwerkzeuge, und die Kompatibilitäts-Anleitung hilft bei der Auswahl der Clients.

Fazit

CSS in E-Mails ist ein Flickenteppich, aber ein gut dokumentierter. Halten Sie sich an Eigenschaften mit breiter Unterstützung, legen Sie kritische Styles inline, bauen Sie mit Tabellen und lassen Sie Verbesserungen sauber entfallen. Wer die Zahlen kennt, muss weniger raten und kann gezielt dort testen, wo die Lücken liegen.