The gap between your last section and the footer

A full-width coloured band at the bottom of a page, and a stubborn strip of page background between it and the footer. I fixed this twice with the wrong fix before I measured anything.

The symptom is always the same. The last section on the page is alignfull — a call to action, a dark band, something with a background colour. It stretches edge to edge exactly as it should. And then there is a gap underneath it, and then the footer starts.

Not a large gap. Large enough that a client points at it.

The fix that isn’t

Search for this and you will find the answer immediately, and it will be this:

.wp-site-blocks > footer {
    margin-block-start: 0;
}

Core puts a top margin on the footer via blockGap on .wp-site-blocks. Removing it is correct, and that rule belongs in your theme.

It was not my gap. I added it, the gap stayed, and because I had “fixed” it I spent the next round looking somewhere else entirely.

What it actually was

One line in theme.json:

"styles": {
  "blocks": {
    "core/post-content": {
      "spacing": { "padding": { "bottom": "var(--wp--preset--spacing--60)" } }
    }
  }
}

Perfectly reasonable. It gives prose pages breathing room at the bottom instead of ending flush against the footer.

Here is the part that is easy to miss. An alignfull block stretches sideways out of its container — that is what the alignment does, using negative margins or grid escape depending on your layout settings. What it cannot do is cover its container’s own bottom padding.

So the band goes edge to edge horizontally, and then stops, because it has run out of container. Below it sits 48 or 125 or 175 pixels of core/post-content padding, painted in the page background, between your band and your footer.

Those three numbers are from three of my themes. The gap size is simply whatever that theme set its spacing preset to, which is why it looks like a mysterious inconsistent bug rather than a single cause.

The control group I already had

The fourth theme never showed it. Not once, on any page.

That theme sets no core/post-content padding at all. It is not more carefully built than the others — I simply never added the rule to it. It was sitting there the whole time as a controlled experiment proving the cause, and I did not look at it until after I had guessed wrong twice.

If you maintain more than one theme, the odd one out is worth checking early. It usually knows something.

The fix

.wp-block-post-content:has(> .alignfull:last-child) {
    padding-bottom: 0;
}

Read it as a sentence: when post-content’s last child is a full-width block, drop the bottom padding.

The :has() matters. Removing the padding outright would fix the band and take the breathing room off every prose page — a page ending in a paragraph would butt straight into the footer. This targets only the case where a full-bleed section is the last thing on the page, which is exactly the case where the padding is doing harm.

:has() has been in every current browser since late 2023, and the failure mode if a visitor’s browser lacks it is the gap you already had.

The lesson that actually cost me the time

It was not the CSS. It was this: verifying that a rule exists is not verifying that the gap is gone.

I checked twice that my margin-block-start: 0 was present in the served stylesheet, saw that it was, and concluded the problem was elsewhere. It was present. It was also irrelevant.

What settles it is measuring the rendered boxes:

const footer = document.querySelector('.wp-site-blocks > footer');
const last   = document.querySelector('.wp-block-post-content > *:last-child');
console.log(footer.getBoundingClientRect().top - last.getBoundingClientRect().bottom);

Zero, or it is not fixed. Run it on a page that ends in a band and a page that ends in a paragraph — you want zero on the first and your spacing value on the second.

I now measure this on every template that ends in a full-width section, on every theme, before I call it done. It takes a minute and it has caught two regressions since.

En bref

• The footer’s own top margin is a real thing and worth zeroing, but it is probably not your gap.
• core/post-content bottom padding in theme.json is. An alignfull child escapes the container sideways and cannot cover its bottom padding.
• The gap is exactly your spacing preset, which is why it differs per theme and looks random.
• Fix with :has(> .alignfull:last-child) so prose pages keep their breathing room.
• Measure footer.top - lastSection.bottom. A rule existing in the stylesheet proves nothing.