Seitenabstand

Zwei Varianten desselben Textblocks. Zieh das Browserfenster schmaler und breiter oder dreh das Handy – die Zahlen unter jedem Streifen ändern sich sofort mit.

Aktuelle Fensterbreite: ?

A · Fest – immer 16 Pixel

Ein Wert für alle Breiten. Sehr berechenbar. Auf grossen Bildschirmen steht der Text dicht am Rand.

Willkommen bei uns

Kurzer Einleitungstext, an dem sich ablesen lässt, wie nah der Text am Rand steht und wie viel Luft bleibt.

Seitenabstand ?  ·  Inhaltsbreite ?

B · Mitwachsend – 16 bis 32 Pixel

Geschrieben als padding-inline: clamp(16px, 4vw, 32px). Gelesen: mindestens 16, höchstens 32, dazwischen vier Prozent der Fensterbreite. Auf dem Handy schont es den knappen Platz, auf dem Monitor atmet es.

Willkommen bei uns

Kurzer Einleitungstext, an dem sich ablesen lässt, wie nah der Text am Rand steht und wie viel Luft bleibt.

Seitenabstand ?  ·  Inhaltsbreite ?

Was dieses Werkzeug zeigt

Seitenabstand
Der gemessene Innenabstand links. Bei Variante A steht dort immer 16. Bei Variante B wächst er mit der Fensterbreite, bis er bei 32 stehen bleibt – das passiert ab 800 Pixeln Fensterbreite, weil vier Prozent davon 32 ergeben.
Inhaltsbreite
Was nach Abzug beider Abstände für den Text bleibt.
Worauf du achten solltest
Zieh das Fenster auf Handybreite. Bei Variante B sind dort beide Varianten fast gleich – der Unterschied entsteht erst auf breiten Bildschirmen. Genau das ist die Frage: Soll der Rand mitwachsen oder nicht?

Grundlage und Quellen

Hinweis: Die deutschen MDN-Seiten sind automatisch aus dem Englischen übersetzt und können Fehler enthalten. MDN kennzeichnet das selbst.