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.
- Padding for a component adjusts spacing inside its box
- Margin for a component adjust spacing outside its box
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:
- 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.
- 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.