White space betwen header and next block

Hi @jesusgpastor

Are you referring to the white space above the grey cover image on the page you shared https://www.unfotografo.es/historias ?

If that is the case, the top white space is coming from the block margin. You can remove that by adding the code below to your Additional CSS section :

.wp-site-blocks {
margin-block-start: var( –wp–style–block-gap );
margin-top: 0px;
}

@jesusgpastor you don’t need to add any custom CSS.

You can edit the page template in the site editor and specify zero margin for the main Group block just below the header.

Group > Dimensions (toggle margin control on) > Margin > 0px (top margin)

A bit of background information to help explain this.
In a block theme everything is a block; the header, the main group block containing the page content, individual blocks within the page content, headings, paragraphs, images etc.
WordPress uses a blockGap variable, and this is applied to provide spacing between blocks. Most of the time this is visually better (or it was decided by those building WordPress to be better) than having no visible space between blocks.

Giving the main content group zero top margin will override the blockGap here.

Seems to be a common issue for when you don’t want any space between the header and the page content: https://www.ads-software.com/support/topic/remove-magical-white-line/

There does seem to be an issue with the space only appearing in the live site and not in the editor. They should ideally appear identical but that is another issue.

thanks a lot ??

@thelmachido that CSS does not makes the magic ??
@uxl https://prnt.sc/EEOkKYVrqrq4 I did what you suggest but did not work either… It does work on the visual editor, but as you also said “the space only appears in the live site and not in the editor”.

any idea? thanks!!!

Thanks for supplying the screenshot.

I can see in the screenshot you have added the “0” to the padding (relleno en espa?ol).

To access the margin (margen en espa?ol), cick the small button with the 3 vertical dots to the right of the Dimensions panel (with the Group block selected) and make sure to check/select the Margin option. This will bring up the margin control as it is hidden by default.
Enter “0” here for the top margin and save and the gap between the header and the main content group will be removed on the live site.

Additional: it looks like you have added the custom CSS directly into the “Additional CSS Class” of the header block.

Writing the full CSS code directly here won’t work and may even break the styling of this block and others on the page.

Thanks a lot @uxl
Cool, that yes did the magic in the upper white space ??
And thanks for the CSS tip, already removed ??
Still, with the lower part of the block, just above the footer, I have the same problem and the 0px Lower Margin does not work https://prntscr.com/JQed5PdWTNqM
If I write -30px in the Lower Margin the white space disappear temporary and match perfect https://prntscr.com/_45dWi4ZBjal
But the thing is when I accept that -value it goes back to 0.
That low white space I mean https://www.unfotografo.es/contacto

Thanks again!

• This reply was modified 2 years ago by jesusgpastor.

To remove the space above the footer you will need to add some custom CSS, as the site wide blockGap is giving the white space at the top of the footer template part, and template parts do not have the dimension controls in the editor.

The old style customizer dashboard link is not available for block themes but you can go direct by adding customize.php to the end of your site admin URL in the browser address bar: https://www.unfotografo.es/wp-admin/customize.php

Here in the customizer, add the following CSS code in the “Additional CSS” section:

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