Padding

Choose a Starter Kit

Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.

open_in_new

open_in_new

open_in_new

Quickstart

Get a feel for LiftKit by following along with this short tutorial.

Overview

Padding sets space following the same principles as margins.

Class Name	CSS Properties
`.p-top__2xs`	`padding-top: var(--2xs);`
`.p-top__xs`	`padding-top: var(--xs);`
`.p-top__sm`	`padding-top: var(--xm);`
`.p-top__md`	`padding-top: var(--md);`
`.p-top__lg`	`padding-top: var(--lg);`
`.p-top__xl`	`padding-top: var(--xl);`
`.p-top__2xl`	`padding-top: var(--2xl);`
`.p-right__2xs`	`padding-right: var(--2xs);`
`.p-right__xs`	`padding-right: var(--xs);`
`.p-right__sm`	`padding-right: var(--xm);`
`.p-right__md`	`padding-right: var(--md);`
`.p-right__lg`	`padding-right: var(--lg);`
`.p-right__xl`	`padding-right: var(--xl);`
`.p-right__2xl`	`padding-right: var(--2xl);`
`.p-bottom__2xs`	`padding-bottom: var(--2xs);`
`.p-bottom__xs`	`padding-bottom: var(--xs);`
`.p-bottom__sm`	`padding-bottom: var(--xm);`
`.p-bottom__md`	`padding-bottom: var(--md);`
`.p-bottom__lg`	`padding-bottom: var(--lg);`
`.p-bottom__xl`	`padding-bottom: var(--xl);`
`.p-bottom__2xl`	`padding-bottom: var(--2xl);`
`.p-left__2xs`	`padding-left: var(--2xs);`
`.p-left__xs`	`padding-left: var(--xs);`
`.p-left__sm`	`padding-left: var(--xm);`
`.p-left__md`	`padding-left: var (--m);`
`.p-left__lg`	`padding-left: var(--lg);`
`.p-left__xl`	`padding-left: var(--xl);`
`.p-left__2xl`	`padding-left: var(--2xl);`

Give Us Feedback

Click or tap to reveal form.

expand_more

check_circle

Success! An email has been sent to you with more details.

Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.

error

Error: Something went wrong. Email info@chainlift.io directly for assistance.