{"id":1072,"date":"2026-09-08T08:12:10","date_gmt":"2026-09-08T06:12:10","guid":{"rendered":"https:\/\/timotheacreations.com\/?p=1072"},"modified":"2026-09-11T08:17:18","modified_gmt":"2026-09-11T06:17:18","slug":"the-gap-between-your-last-section-and-the-footer","status":"publish","type":"post","link":"https:\/\/timotheacreations.com\/fr\/the-gap-between-your-last-section-and-the-footer\/","title":{"rendered":"The gap between your last section and the footer"},"content":{"rendered":"

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.<\/p>\n\n\n\n

The symptom is always the same. The last section on the page is alignfull<\/code> \u2014 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.<\/p>\n\n\n\n

Not a large gap. Large enough that a client points at it.<\/p>\n\n\n\n

The fix that isn’t<\/h2>\n\n\n\n

Search for this and you will find the answer immediately, and it will be this:<\/p>\n\n\n\n

.wp-site-blocks > footer {\n    margin-block-start: 0;\n}<\/code><\/pre>\n\n\n\n
Core puts a top margin on the footer via blockGap<\/code> on .wp-site-blocks<\/code>. Removing it is correct, and that rule belongs in your theme.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
What it actually was<\/h2>\n\n\n\n
One line in theme.json<\/code>:<\/p>\n\n\n\n
\"styles\": {\n  \"blocks\": {\n    \"core\/post-content\": {\n      \"spacing\": { \"padding\": { \"bottom\": \"var(--wp--preset--spacing--60)\" } }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
Perfectly reasonable. It gives prose pages breathing room at the bottom instead of ending flush against the footer.<\/p>\n\n\n\n
Here is the part that is easy to miss. An alignfull<\/code> block stretches sideways out of its container<\/strong> \u2014 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<\/strong>.<\/p>\n\n\n\n
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<\/code> padding, painted in the page background, between your band and your footer.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
The control group I already had<\/h2>\n\n\n\n
The fourth theme never showed it. Not once, on any page.<\/p>\n\n\n\n
That theme sets no core\/post-content<\/code> padding at all. It is not more carefully built than the others \u2014 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.<\/p>\n\n\n\n
If you maintain more than one theme, the odd one out is worth checking early. It usually knows something.<\/p>\n\n\n\n
The fix<\/h2>\n\n\n\n
.wp-block-post-content:has(> .alignfull:last-child) {\n    padding-bottom: 0;\n}<\/code><\/pre>\n\n\n\n
Read it as a sentence: when post-content’s last child is a full-width block, drop the bottom padding.<\/em><\/p>\n\n\n\n
The :has()<\/code> matters. Removing the padding outright would fix the band and take the breathing room off every prose page \u2014 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.<\/p>\n\n\n\n
:has()<\/code> 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.<\/p>\n\n\n\n
The lesson that actually cost me the time<\/h2>\n\n\n\n
It was not the CSS. It was this: verifying that a rule exists is not verifying that the gap is gone.<\/strong><\/p>\n\n\n\n
I checked twice that my margin-block-start: 0<\/code> was present in the served stylesheet, saw that it was, and concluded the problem was elsewhere. It was present. It was also irrelevant.<\/p>\n\n\n\n
What settles it is measuring the rendered boxes:<\/p>\n\n\n\n
const footer = document.querySelector('.wp-site-blocks > footer');\nconst last   = document.querySelector('.wp-block-post-content > *:last-child');\nconsole.log(footer.getBoundingClientRect().top - last.getBoundingClientRect().bottom);<\/code><\/pre>\n\n\n\n
Zero, or it is not fixed. Run it on a page that ends in a band and a page that ends in a paragraph \u2014 you want zero on the first and your spacing value on the second.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
En bref<\/h2>\n\n\n\n
    \n
  • The footer’s own top margin is a real thing and worth zeroing, but it is probably not your gap.<\/li>\n\n\n\n
  • core\/post-content<\/code> bottom padding in theme.json<\/code> is. An alignfull<\/code> child escapes the container sideways and cannot cover its bottom padding.<\/li>\n\n\n\n
  • The gap is exactly your spacing preset, which is why it differs per theme and looks random.<\/li>\n\n\n\n
  • Fix with :has(> .alignfull:last-child)<\/code> so prose pages keep their breathing room.<\/li>\n\n\n\n
  • Measure footer.top - lastSection.bottom<\/code>. A rule existing in the stylesheet proves nothing.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"
    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<\/p>","protected":false},"author":265843788,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1414,1367],"tags":[],"class_list":["post-1072","post","type-post","status-publish","format-standard","hentry","category-block-themes","category-wordpress"],"_links":{"self":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts\/1072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/users\/265843788"}],"replies":[{"embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/comments?post=1072"}],"version-history":[{"count":1,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts\/1072\/revisions"}],"predecessor-version":[{"id":1073,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts\/1072\/revisions\/1073"}],"wp:attachment":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/media?parent=1072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/categories?post=1072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/tags?post=1072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}