7th
Framer Advent Calendar

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

目次

目次

目次

パディングとギャップ

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


パディング

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

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

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


ギャップ

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

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

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

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

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

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

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

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

\ このカレンダーで学んだことを、ハッシュタグをつけてXに投稿してください! /

このカレンダーで学んだことを、

\ ハッシュタグをつけてXに投稿してください! /

カレンダーへ戻る

カレンダーへ戻る

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese