Gutenberg Box spacing

[plumcreek]

In trying to tighten up this page https://maidenrockinn.com/rooms-rates-2/ I am so challenged. I’m about 1/2 way through so just look at the part above the Red Clay room if you can help.

I’ve attempted to use various plug-ins because I had little luck with adding CSS to the site. All of this space is making me scream. It seems that in the editor there are extra blocks being created and I see no way to remove them. I’ve removed the top and bottom spacing on all the images, reduced the line height to 1, still all of this (to me) random spacing.

TIA for any advice you have.

(fwiw I’m attempting to duplicate their previous site and this page is the worst, I’ll get to the menus later.)

[scrambler]

Regarding the space above the brick image, it comes from two things

1) the block inserted the image with a figure tag that is styled by default with
figure{margin:1em 40px}

So adding the rule below to the theme global custom CSS rule box
figure{margin:0 40px}

Would remove the top and bottom space on the image

2) There is additional space coming form the weaver setting for “space between title and content”, you can set that to zero in Main Options > Content areas

[scrambler]

For what comes below I see a rule that adds a top and bottom margin to blocks

#content [class^=wp-block-]{margin-top:1.75em;margin-bottom:1.75em;}

So you can use that rule to set these to zero or smaller values

 

 

[plumcreek]

I appreciate you more than I’m able to express, Scrambler, thank you. It’s been a long time since I’ve coded, and catching up is quite the process.

[Weaver]

I wonder if the theme should have and option for the Block Editor to set those margins differently?

[scrambler]

@weaver, I think that would be a good idea.

Ideally, but I dont know if it is possible, it would be good to expose these margins at the Block level

 

[Author]

Posts