Zero top margin on first image

Newbie here. I’m trying to create this commonly seen transparent header/menu on top of the first image of the page (technically an image inside a single column) which is full width. I was able to get that but only by editing the general site settings and setting the ‘space around Gutenberg elements’ to ‘zero’. This has the undesired side-effect that now all my elements are close to another. So my question: How is this very commonly seen design element (transparent header on top of full width image) achieved without the general setting of ‘space around elements’ to ‘zero’.

For reference: This is WordPress, Blocksy.