How do I add padding and margin to my custom block?

  • elizabethhereandnowdigital

    (@elizabethhereandnowdigital)


    2 years, 5 months ago

    In the custom block I am developing I am able to display the padding and margin controls in the block properties sidebar. However, how do I apply these settings to my custom blocks?

    Background colour and text colours works out of the box by just enabling these options in the block.json file. But the same is not true for margin and padding.

Viewing 1 replies (of 1 total)

  • Hi Use margin and padding to space blocks from each other and change the space between a block’s content and border.An example of margins is the space between tiles on a page. If you don’t want the tiles all touching each other, you’d add margins to put some space between them.An example of padding is making a button wider and taller so that it is easier touch with a fingertip or broad pointer.
    Think of padding like the stuffing you put in a pillow to make it bigger. link of margins as the space between the pillows.To adjust margins, take the following steps:Select the block that needs margin adjustments.Go to the Margin & Padding section of the Style tab.Adjust the values in the outer rectangle to set the margin.You can use any legal CSS unit for the value, such as percentage, ems, rems, or pixels (px).The following video demonstrates adjusting the margin settings on a Text block.

Viewing 1 replies (of 1 total)
  • The topic ‘How do I add padding and margin to my custom block?’ is closed to new replies.