# How to Add Padding in Framer

> To add padding in Framer, open your project and select a frame. Next, locate the Layout section in the right-hand Style panel, select Padding, and enter your desired values for Top, Bottom, Left, and Right. Finally, adjust the spacing to perfect your design and publish it with one click.

Canonical: https://livedemo.ai/tutorials/how-to-add-padding-in-framer/
Apps: Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e83d673bd5aa8e60724/preview?step=1

## Steps

1. Open your Framer project. Navigate between pages to build complete, multi-page websites.
2. Select a frame .
3. In the right-hand 'Style' panel, scroll to the 'Layout' section.
4. Select 'Padding'.
5. Enter values for 'Top, Bottom, Left, Right' padding.
6. Adjust padding to perfect the spacing between elements.
7. Publish your design with one click and share it with the world.