Change block spacing

• 

  unklee · Member · Nov 6, 2019 at 9:59 am

  • Copy link
  • Add topic to favorites

  Is it possible to change the space between blocks. It used to be easy – just style the paragraph or heading to reduce or increase the top or bottom margin, even make it negative – but that doesn’t seem to work with Gutenberg.

  Is there something I am missing?

  Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  staff-blorbo · Staff · Nov 6, 2019 at 10:24 pm

  • Copy link

  Try a Spacer Block to add space: https://en.support.wordpress.com/wordpress-editor/blocks/spacer-block/

  For reducing space, that would need to be done via CSS: https://en.support.wordpress.com/custom-design/custom-css/

• 

  unklee · Member · Nov 6, 2019 at 10:35 pm

  • Copy link

  Thanks, but what CSS?

  Reducing the paragraph margin or even making it negative seems to have no effect. Is there a way to reduce the block margin? What tags do I need to style?

• 

  staff-blorbo · Staff · Nov 6, 2019 at 11:00 pm

  • Copy link

  Try this:

  /* Paragraph spacing */
  .entry-content p {
    margin-bottom: 10px;
    margin-top: 0;
  }

• 

  unklee · Member · Nov 8, 2019 at 1:23 am

  • Copy link

  Yes, that worked, thanks.

  But I don’t know why my code didn’t work. I tried simply styling the paragraph inline, with <p style="margin-top:-30px;"> but it didn’t have any effect.

  I think I did that in the paragraph block using the Code editor. Perhaps I needed to change the block to HTML???

• 

  kokkieh · Staff · Nov 8, 2019 at 3:45 am

  • Copy link

  Adding inline styles to blocks won’t necessarily work, no. In some cases it might actually break the block, as each block is created with pre-defined HTML code that is allowed inside the block, and any other code, even if it’s valid HTML, would be considered invalid as far as the block is concerned.

  This type of change is best done using custom CSS like staff-blorbo provided above.

• 

  unklee · Member · Nov 8, 2019 at 4:08 am

  • Copy link

  Thanks for the advice. I prefer to use CSS, but sometimes to be quick, or to test something out I use inline styles. I will have to change my habits!! :)

• 

  kokkieh · Staff · Nov 8, 2019 at 4:53 am

  • Copy link

  I hear you. The block editor has caused a lot of us to get used to a new way of doing things :D