Sometimes you might want to remove margin or padding from blocks in the block editor (most commonly when using images). To do this, we have created two utility CSS classes you can add to a block's "Advanced > Additional CSS Classes" field in the block settings sidebar.

• To remove margin (most common), add the CSS class no-margin to the "Advanced > Additional CSS Classes" field.
  • In addition to removing margin from all sides of a block, you can alternatively remove it from each side individually using the following CSS classes
    • no-margin-top
    • no-margin-right
    • no-margin-bottom
    • no-margin-left
  • You can combine these classes to remove it from multiple sides at a time by including them with a space between. For example, to remove margin from the top and bottom on a block, add no-margin-top no-margin-bottom
• To remove padding, add the CSS class no-padding to "Advanced > Additional CSS Classes" field.
  • In addition to removing padding from all sides of a block, you can alternatively remove it from each side individually using the following CSS classes
    • no-padding-top
    • no-padding-right
    • no-padding-bottom
    • no-padding-left
  • You can combine these classes to remove it from multiple sides at a time by including them with a space between. For example, to remove padding from the top and bottom on a block, add no-padding-top no-padding-bottom

Example of removing margins from an image block

This example contains a Columns block with two 50% wide columns. In the first column, we've added a Heading block with a green background and white text and an image block. By default, there is 20px of margin on the top and bottom of images.

Notice the space above the image in the example below.

Add the CSS class no-margin to the "Advanced > Additional CSS Classes" field to remove this space