Einst gabe es zum definieren von Abständen das „leer.gif“, denn in den Anfängen von HTML gab es nur wenig Einflussnahme auf das Erscheinungsbild von Elementen. Um Elemente überhaupt nebeneinander zu bringen, war es in ab ca 1997 geübte Praxis, Layouts mit Tabellen anzulegen. Auch meine ersten Weblayouts basierten noch auf Tabellen. Danach kamen dann Floatlayouts (zurückblickend kommen mir die noch grauenvoller vor als die Tabellen ;)), und dann, endlich, mit HTML5 2009 die Aussicht auf Flex-Layouts, und später auch Grids. Bis zur allgemeinen Praxistauglichkeit war’s allerdings noch ein Weg.
Margin und Padding kamen mit CSS Level 1 1996. Es gibt sie immer noch, doch auch ein Block-Element namens „Abstandhalter“, der ein leeres HTML-Element zwischen andere HTML-Elemente schiebt und so einen horizontalen Abstand schafft. Er ist eine Behelfslösung, den halt auch viele Pagebuilder mitbringen.
Innen- Außen- und Blockabstände verstehen
Block- und Inline-Blockelemente in HTML (nicht zu verwechseln mit Blöcken des WordPress-Blockeditors) können sowohl Innen- als auch Außenabstände erhalten. Margin bezeichnet dabei den Außenabstand, Padding den Innenabstand.
Margin vs Abstandhalter
Das Beispiel ist natürlich „überspitzt“, doch würde man den Abstand zwischen zwei Elementen (in diesem Fall „Gruppen“) rein mit einem Abstandhalter feslegen, würde das natürlich auch seinen Zweck erfüllen, bräuchte jedoch drei Elemente statt zwei, und semantisch wäre es auch nicht der Bringer.
Hier wie es im Frontend aussieht.
Gruppe mit Außenabstand (von oben und unten)
zweite Gruppe mit Außenabstand (von oben und unten)
Der Abstandhalter hat keinen Content, was in Hinblick auf Barrierefreiheit und Suchmaschinenoptimierung nicht ganz so freundlich ist, wie den Abstand über CSS (Margin) festzulegen.
Visuell besteht kein Unterschied zu der Abstandhalter-Variante, es gibt nur zwei Elemente und beide haben Inhalt.
Gruppe mit Außenabstand (von oben und unten)
zweite Gruppe mit Außenabstand (von oben und unten)
Aneinander anschließende Sektionen mit Padding bauen
Gibt man einem Absatz im Blockeditor eine Hintergrundfarbe, erhält dieser normalerweise automatisch einen Innenabstand (den man selbstverständlich auch ändern kann).
Absatz mit Innenabstand
Das ist zum Beispiel ein Mittel zur Hervorhebung eines bestimmten Inhalts, doch hier geht ums Layouten…
Manchmal komme ich auf Landingpages und sehe Sektionen mit Hintergrundfarben oder Bild, die eigentlich aneinander anschließen sollten, doch stattdessen sind dazwischen weiße Streifen, die da einfach nicht hingehören. Da hat jemand in seinem Pagebuilder einfach nicht herausfinden können, wie der den Außenabstand wegbekommt.
Gruppe mit Innenabstand
zweite Gruppe mit Hintergrundbild, Außenabstand oben und unten und größerem Innenabstand
dritte Gruppe mit Innenabstand
Der Unterschied zur Verwendung von Außenabständen wird deutlich, wenn man die Hintergründe färbt. Und man erkennt gut, dass wer mit Sektionen arbeiten möchte, die unmittelbar aneinander anschließen, in Padding sein Justierungswerkzeug findet.
Wenn alle drei Gruppen keinen Außenabstand mehr haben, schließen die Sektionen direkt aneinander an (es kann auch mal sein, dass ein Element innerhalb eines Elements ohne Außenabstand einen Abstand verursacht, d.h. in Einzelfällen bekommt man einen unerwünschten Abstand nicht so leicht weg).
Gruppe mit Innenabstand
zweite Gruppe mit Hintergrundbild und größerem Innenabstand
dritte Gruppe mit Innenabstand
Gap, die möglicherweise unterschätzte Macht in Blocklayouts
„Mind the Gap“ bekommt in der Layoutgestaltung mit dem Blockeditor eine zweite Bedeutung. Einfaches Beispiel:
Eine Überschrift
ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz
noch eine Überschrift
noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz – noch ein Absatz
Während meiner redaktionellen Tätigkeit habe ich mal gelernt, dass Überschriften näher an dem Element sein sollen, zu dem sie gehören als am vorherigen Abschnitt. Ich habe auch schon Beiträge gesehen, da klebte die Überschrift am vorherigen Abschnitt, und zwischen ihr und dem Inhalt, den sie eigentlich betitelte, klaffte eine große Lücke.
Gruppieren und einandern näher bringen ist die Lösung.
Eine Überschrift
ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz – ein Absatz
Elemente, die näher aneinandergerückt oder auch weiter voneinander entfernt werden sollen, einfach gruppieren, und den „Gap“ über Blockabstände justieren. Die Abstände sind je nach Theme anders benannt, davon nicht irritieren lassen.
Untereinander
gereihte
Absätze
haben
standardmäßig
Abstände
voneinander
Untereinander
gereihte
Absätze
kann
man
gruppieren,
die
Blockabstände
rausnehmen,
dann
haben
sie
keine
Abstände
mehr
voneinander
Das funktioniert in allen Elmenten, die als Sektionen geeignet sind, Cover, Gruppen, Zeilen, Stapel, Raster und Tabellen.
Hinweis: das verwendete Theme muss mit dem Blockeditor kompatibel sein, und die Einstellungen unterstützen, damit die Elemente zum Justieren verfügbar sind.
Schreibe einen Kommentar