GeneratePress/GenerateBlocks: Lücke zwischen Containern entfernen

Wenn zwei GenerateBlocks-Container direkt untereinander liegen und unterschiedliche Hintergrundfarben haben, kann trotzdem ein schmaler Streifen der Seitenfarbe zwischen ihnen sichtbar werden – obwohl bei den Containern selbst kein Abstand eingestellt ist.

Ursache: Margin des letzten Inhaltsblocks

In meinem Fall kam die Lücke nicht vom Container, sondern vom letzten Text-/Absatzblock im ersten Container. Ein HTML-Absatz <p> besitzt im GeneratePress-/WordPress-Styling typischerweise einen unteren Außenabstand. Dieser Margin kann optisch außerhalb des farbigen Bereichs erscheinen.

Lücke in GenerateBlocks entfernen

  1. Markiere den letzten Text- beziehungsweise Headline-Block im ersten Container.
  2. Öffne in GenerateBlocks den Bereich Spacing / Abstände.
  3. Setze Margin Bottom auf 0.
  4. Prüfe zusätzlich den ersten Block im folgenden Container auf einen oberen Margin.

Das HTML-Element nur wegen des Abstands von <p> auf <div> umzustellen ist meist nicht nötig. Wenn es sich inhaltlich um einen Absatz handelt, kann das semantisch richtige <p> bleiben und der Abstand separat gesteuert werden.

Wenn die Lücke trotzdem bleibt

Prüfe im Browser mit „Untersuchen“, welches Element den freien Bereich erzeugt. Neben Absatz-Margins können auch Grid-/Column-Gaps, Bild-Margins oder Padding des Containers verantwortlich sein. GenerateBlocks unterscheidet dabei klar zwischen Margin außerhalb und Padding innerhalb eines Elements.