If a WordPress block grows when you give it a background color, inspect its computed padding before changing margins or the container width. The extra space may come from the block's background styling, an explicit spacing setting, or your theme. Those three causes need different fixes.
Check whether your installed code includes the new control
Gutenberg introduced the CSS custom property --wp--style--block-background-padding so themes can override background-related padding while retaining the old fallback when no override exists. The change covers Paragraph, List, Heading, Preformatted, Columns, Group and Template Part rules. The implementation and test notes also explain that some Group and Template Part styles depend on theme support.
Do not assume a merged Gutenberg change is present in every stable WordPress installation. Record WordPress, Gutenberg if installed, and theme versions. WordPress 7.2 is still a future release as of October 18, 2026. Inspect the actual loaded stylesheet for the custom property before using it as a fix.
Build a small reproduction
On staging, duplicate the affected section into an unpublished test page. Create two otherwise identical Paragraph blocks. Give only the second a background color. Keep their font, text, width and explicit spacing identical.
In browser developer tools, select each paragraph and compare padding-top, padding-right, padding-bottom and padding-left in Computed styles. Expand a changed value to locate the winning rule and stylesheet. Also inspect the parent: padding inside a parent is not the same as margin outside a child.
| Observation |
What to investigate next |
| Only the colored paragraph gains padding |
Its background rule and variable fallback |
| Both paragraphs move together |
Parent layout, gap or padding |
| Editor is correct, live page differs |
Frontend stylesheet and cache version |
| Explicit block padding wins |
Saved block style, not the default background rule |
Write down the winning selector before editing CSS. This avoids a common detour: reducing content width to compensate for padding, then discovering that an uncolored section is now too narrow.
Colored block: Inspect computed padding. Parent: Separate gap and margin. Nested child: Check inherited custom property. Public page: Confirm the served rule. Proposed verification, not a customer test result.
Try a narrow override first
Add a custom class such as background-padding-audit to the test block. On a build that uses the custom property, the following is a scoped example, not a universal stylesheet replacement:
.background-padding-audit {
--wp--style--block-background-padding: 0.75rem 1rem;
}
Choose spacing that suits the content. Zero is useful as a temporary diagnostic because the change is obvious, but text pressed against a colored edge is rarely a good final design. A value that produces no change may mean an explicit padding declaration wins, the rule is not loaded, or the property is unsupported in that build.
Custom properties inherit. If you place this class on a Group, test colored blocks inside that Group as well. An override intended for the outer container can influence a descendant that reads the same property. Do not put it on body unless you deliberately want a theme-wide policy and have reviewed all affected templates.
Verify the fix where content actually appears
Use a fixture containing a short heading, long heading, list, paragraph and nested colored paragraph. Test a narrow phone width and a normal desktop width in both editor and logged-out frontend views. Remove the background color from one copy and confirm that uncolored content still behaves as intended.
After saving, reload from the public URL and check the computed value again. If the editor and frontend disagree, compare the served CSS version before clearing every cache. A cache purge cannot correct the wrong selector, and a specificity battle can conceal the original problem without solving it.
Record the custom class, final value, affected template and a screenshot of the computed rule in the change note. That gives the next developer a reason for the override and a way to remove it when the theme changes.
When the problem is responsive instead
If padding is correct on desktop but a saved mobile value disappears, follow the responsive theme.json migration checks. That is a separate state problem. For a production layout that needs a narrowly scoped repair, ask HandL WP to inspect the CSS cascade with the affected URL and block type.
References reviewed October 18, 2026. Diagrams and test fixtures are explanatory, not customer results.