Abstände im Webdesign

Heute wollte ich über Abstände sprechen. Und nicht die Körperabstände, sondern Anstände im Webdesign. Sehr oft werden sie vergessen oder falsch gesetzt, obwohl die als negativer Raum zu den wichtigsten Designelementen gehören. Es gibt ein paar ungeschriebene Gesetze, auf die man achten muss, um moderne, klar strukturierte Webseiten zu erstellen.

Zuerst was ich meine:
Außenrand: Bereich zwischen Überschrift und Section-Rand
Innerer Abstand: Bereich zwischen Überschrift und Untertitel, Elementes etc.

Damit wir verschiedene Webseiten-Sectionen voneinander trennen und eine klare Hierarchie in Content-Blöcken zeigen, gibt es eine einfache Regel:

Außenrand soll immer größer sein,
als Abstand zwischen Elementes innerhalb Section

Und wie groß soll er sein? Eine ungefähre graphische Darstellung, wie eine Section mit richtigen Abständen aussieht:

Wichtiger Hinweis: Die Abstände gelten, wenn die Sectionen bereits durch Farben oder Dividers voneinander getrent sind. Andernfalls werden sie vom letzten Element der oberen Section berechnet.

Diese Werte darf man natürlich nicht als letzte Wahrheit betrachten. Im Webdesign spielen Erfahrung und klarer Sinn eine entscheidende Rolle.