7th
Framer Advent Calendar

Framerのパディングとギャップ

目次

目次

目次

パディングとギャップ

パディングとギャップはStackまたはGridにした際に機能する余白を制御することができます。
CSSのmarginのような外側の余白はFramerにはありません。


パディング

親フレームと子フレーム間の余白の設定です。

Stack・Gridツールで作成した際、デフォルトは0になっています。

上下左右を別々に設定することもできます。


ギャップ

子フレームと子フレーム間の余白の設定です。

Stack・Gridツールで作成した際、デフォルトは10になっています。

親フレームのサイズをFit Contentにした場合

パディング・ギャップを大きくすると、サイズも自動的にその分大きくなります。

マージンを使いたい場面での対処法

Framerにはマージン(要素の外側の余白)の設定がありませんが、親要素にパディングを設定するなどし、同様の効果を得ることができます:

  1. 外側に余白が必要な要素に対し、さらに新しいフレームで囲む

  2. 新しいフレーム(親要素)にパディングを設定

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

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English