7th
Framer Advent Calendar

Framer's padding and gap

Table of Contents

Table of Contents

Table of Contents

Padding and Gap

Padding and gap control the spacing that functions when set to Stack or Grid.
Framer does not have external margins like CSS's margin.


Padding

This sets the spacing between the parent frame and the child frames.

When created with Stack or Grid tools, the default is 0.

You can also set the top, bottom, left, and right separately.


Gap

This sets the spacing between child frames.

When created with Stack or Grid tools, the default is 10.

When the size of the parent frame is set to Fit Content

Increasing the padding and gap will automatically enlarge the size accordingly.

How to handle situations where you want to use margins

Framer does not have a margin setting (the outer spacing of elements), but you can achieve similar effects by setting padding on the parent element, for example:

  1. Encapsulate elements that require outer spacing in a new frame

  2. Set padding on the new frame (parent element)

Please post what you learned from this calendar on X with a hashtag!

What you learned from this calendar,

\ please post it on X with a hashtag! /

Back to calendar

Back to calendar

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Pro Plan 25% discount code

English