Replo Docs

Search

Spacing

  • Updated
Replo Editor screenshot showing spacing controls

Spacing controls allow you to edit the margin (spacing outside the component's background) and padding (spacing inside the component's background), as well as the component's width and height.

Margin and Padding

You can use margin and padding to expand and reposition components in Replo. Each component in Replo has a box, and that box's size is determine by the component's content, margin and padding.

  1. Padding for a component adjusts spacing inside its box
  2. Margin for a component adjust spacing outsidelayout its box
Replo component with margin and padding

Background colors and background images in Replo apply only to the space inside the component's box. This means margin is great for adding spacing between components, and padding is great for adding spacing inside a component.

Add spacing on one side

To add spacing to a single side, either:

  1. Click the side you want to adjust in the spacing control, then type the number of pixels you want to add to that side. If you're not sure how much to add, we recommend starting with 50 and adjusting from there.
  2. Click and drag on the side you want to adjust to see it preview in real-time in the page.

Add spacing on complementary sides

To add spacing to both horizontal or vertical sides, hold option/alt and drag on one of the spacing controls - the complementary side will update automatically.

Add spacing on all sides

To add spacing to all sides at the same time, hold shift and drag on one of the spacing controls - the complementary side will update automatically.

Another pro tip: hold option/alt while clicking on the spacing fields to reset them back to 0.

Resetting spacing

To reset the spacing on a one of the sides, hold option/alt and click on the side you want to reset.

Negative margin

Components can have negative margin - if a component has a negative margin, it will be positioned outside its regular box. You can use negative margin to overlap elements.

Spacing Units

Like many fields in Replo, margin and padding default to being set in pixels. However, you can use other units for margin and padding as well.

To use a percentage of the container's width instead of a pixel value, type a value like "10%" into the margin or padding fields.

Was this article helpful?