info

Get Help from a LiftKit Expert

arrow_forward
Get Help

Padding

Choose a Starter Kit

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

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.