Randabstände sind die freien Flächen zwischen dem Inhalt und der Kante einer Seite, eines Bildschirms oder eines Elements. Im Druck heißen sie Stege, im Webdesign Margins. Sie lassen den Inhalt atmen und verhindern, dass Text am Rand klebt oder beim Beschnitt angeschnitten wird.
- Randabstände
Die freien Flächen am Rand einer Seite oder eines Layouts, zwischen Inhalt und Kante.
Beispiel: „Auf dem Smartphone lassen die Randabstände von 16 Pixeln den Text nicht an den Displayrand stoßen.“Auch: Seitenränder, Margins, im Druck Stege.
Abgrenzung zum Abstand zwischen Spalten: Er heißt Steg oder englisch gutter.
Randabstände im Druck
Der Duden nennt den freien Raum an den Seiten einer Druckform Steg; zwischen zwei Buchseiten liegt der Bundsteg. Wie die Stege im Verhältnis stehen, beschreibt der Satzspiegel. Dazu kommt eine praktische Grenze: Druckereien verlangen einen Sicherheitsabstand vom Endformat, häufig 3 Millimeter, weil der Schnitt nicht auf den Millimeter genau sitzt.
Randabstände im Web
Laut Nielsen Norman Group gehören Ränder neben Spalten und Zwischenräumen zu jedem Raster: die äußeren Bereiche links und rechts, in denen kein Inhalt steht. Material Design 3 nennt 16 dp für schmale Bildschirme unter 600 dp und 24 dp für alle breiteren. Auf großen Bildschirmen begrenzt zusätzlich eine maximale Inhaltsbreite die Zeilenlänge.
Randabstände in CSS
CSS kennt zwei Arten von Abstand. Laut MDN liegt die Margin außen um ein Element und hält andere Elemente auf Abstand; zwei aufeinandertreffende Margins verschmelzen zur größeren. Das Padding liegt innen zwischen Inhalt und Rahmen und darf nicht negativ sein.
main {
max-width: 70rem;
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 600px) {
main { padding-inline: 1.5rem; }
}