Utilities

Spacing

Generated from the registry, so this page can't drift from the compiler.

padding

Sets padding on all sides. Up to four values follow CSS shorthand order.

Syntax

syntax

padding(value)
padding(value,value2)
padding(value,value2,value3)
padding(value,value2,value3,value4)
padding[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	var(--name)	See type

Examples and generated CSS

expressions

padding(4)
padding(4,8)
padding(1,2,3,4)
md:padding(8)
padding[10px_5%]

Generated CSS

.padding\(1\,2\,3\,4\) {
  padding: var(--croff-spacing-1) var(--croff-spacing-2) var(--croff-spacing-3) var(--croff-spacing-4);
}

.padding\(4\) {
  padding: var(--croff-spacing-4);
}

.padding\(4\,8\) {
  padding: var(--croff-spacing-4) var(--croff-spacing-8);
}

.padding\[10px_5\%\] {
  padding: 10px 5%;
}

@media (min-width: 768px) {
  .md\:padding\(8\) {
    padding: var(--croff-spacing-8);
  }
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:padding(4)
hover:padding(4)
lg:focus:padding(4)

padding-x

Sets horizontal padding.

Syntax

syntax

padding-x(value)
padding-x[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	var(--name)	See type

Examples and generated CSS

expressions

padding-x(4)
padding-x(2)
padding-x[5vw]

Generated CSS

.padding-x\(2\) {
  padding-left: var(--croff-spacing-2);
  padding-right: var(--croff-spacing-2);
}

.padding-x\(4\) {
  padding-left: var(--croff-spacing-4);
  padding-right: var(--croff-spacing-4);
}

.padding-x\[5vw\] {
  padding-left: 5vw;
  padding-right: 5vw;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:padding-x(4)
hover:padding-x(4)
lg:focus:padding-x(4)

padding-y

Sets vertical padding.

Syntax

syntax

padding-y(value)
padding-y[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	var(--name)	See type

Examples and generated CSS

expressions

padding-y(4)
padding-y(2)
padding-y[5vh]

Generated CSS

.padding-y\(2\) {
  padding-top: var(--croff-spacing-2);
  padding-bottom: var(--croff-spacing-2);
}

.padding-y\(4\) {
  padding-top: var(--croff-spacing-4);
  padding-bottom: var(--croff-spacing-4);
}

.padding-y\[5vh\] {
  padding-top: 5vh;
  padding-bottom: 5vh;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:padding-y(4)
hover:padding-y(4)
lg:focus:padding-y(4)

padding-top

Sets top padding.

Syntax

syntax

padding-top(value)
padding-top[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	var(--name)	See type

Examples and generated CSS

expressions

padding-top(4)
padding-top[3px]

Generated CSS

.padding-top\(4\) {
  padding-top: var(--croff-spacing-4);
}

.padding-top\[3px\] {
  padding-top: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:padding-top(4)
hover:padding-top(4)
lg:focus:padding-top(4)

padding-right

Sets right padding.

Syntax

syntax

padding-right(value)
padding-right[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	var(--name)	See type

Examples and generated CSS

expressions

padding-right(4)
padding-right[3px]

Generated CSS

.padding-right\(4\) {
  padding-right: var(--croff-spacing-4);
}

.padding-right\[3px\] {
  padding-right: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:padding-right(4)
hover:padding-right(4)
lg:focus:padding-right(4)

padding-bottom

Sets bottom padding.

Syntax

syntax

padding-bottom(value)
padding-bottom[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	var(--name)	See type

Examples and generated CSS

expressions

padding-bottom(4)
padding-bottom[3px]

Generated CSS

.padding-bottom\(4\) {
  padding-bottom: var(--croff-spacing-4);
}

.padding-bottom\[3px\] {
  padding-bottom: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:padding-bottom(4)
hover:padding-bottom(4)
lg:focus:padding-bottom(4)

padding-left

Sets left padding.

Syntax

syntax

padding-left(value)
padding-left[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	var(--name)	See type

Examples and generated CSS

expressions

padding-left(4)
padding-left[3px]

Generated CSS

.padding-left\(4\) {
  padding-left: var(--croff-spacing-4);
}

.padding-left\[3px\] {
  padding-left: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:padding-left(4)
hover:padding-left(4)
lg:focus:padding-left(4)

margin

Sets margin on all sides. Up to four values follow CSS shorthand order.

Syntax

syntax

margin(value)
margin(value,value2)
margin(value,value2,value3)
margin(value,value2,value3,value4)
margin[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	keyword	auto
	var(--name)	See type

Examples and generated CSS

expressions

margin(4)
margin(4,8)
margin(1,2,3,4)
md:margin(8)
margin[10px_5%]

Generated CSS

.margin\(1\,2\,3\,4\) {
  margin: var(--croff-spacing-1) var(--croff-spacing-2) var(--croff-spacing-3) var(--croff-spacing-4);
}

.margin\(4\) {
  margin: var(--croff-spacing-4);
}

.margin\(4\,8\) {
  margin: var(--croff-spacing-4) var(--croff-spacing-8);
}

.margin\[10px_5\%\] {
  margin: 10px 5%;
}

@media (min-width: 768px) {
  .md\:margin\(8\) {
    margin: var(--croff-spacing-8);
  }
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:margin(4)
hover:margin(4)
lg:focus:margin(4)

margin-x

Sets horizontal margin.

Syntax

syntax

margin-x(value)
margin-x[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	keyword	auto
	var(--name)	See type

Examples and generated CSS

expressions

margin-x(4)
margin-x(auto)
margin-x[5vw]

Generated CSS

.margin-x\(4\) {
  margin-left: var(--croff-spacing-4);
  margin-right: var(--croff-spacing-4);
}

.margin-x\(auto\) {
  margin-left: auto;
  margin-right: auto;
}

.margin-x\[5vw\] {
  margin-left: 5vw;
  margin-right: 5vw;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:margin-x(4)
hover:margin-x(4)
lg:focus:margin-x(4)

margin-y

Sets vertical margin.

Syntax

syntax

margin-y(value)
margin-y[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	keyword	auto
	var(--name)	See type

Examples and generated CSS

expressions

margin-y(4)
margin-y(auto)
margin-y[5vh]

Generated CSS

.margin-y\(4\) {
  margin-top: var(--croff-spacing-4);
  margin-bottom: var(--croff-spacing-4);
}

.margin-y\(auto\) {
  margin-top: auto;
  margin-bottom: auto;
}

.margin-y\[5vh\] {
  margin-top: 5vh;
  margin-bottom: 5vh;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:margin-y(4)
hover:margin-y(4)
lg:focus:margin-y(4)

margin-top

Sets top margin.

Syntax

syntax

margin-top(value)
margin-top[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	keyword	auto
	var(--name)	See type

Examples and generated CSS

expressions

margin-top(4)
margin-top[3px]

Generated CSS

.margin-top\(4\) {
  margin-top: var(--croff-spacing-4);
}

.margin-top\[3px\] {
  margin-top: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:margin-top(4)
hover:margin-top(4)
lg:focus:margin-top(4)

margin-right

Sets right margin.

Syntax

syntax

margin-right(value)
margin-right[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	keyword	auto
	var(--name)	See type

Examples and generated CSS

expressions

margin-right(4)
margin-right[3px]

Generated CSS

.margin-right\(4\) {
  margin-right: var(--croff-spacing-4);
}

.margin-right\[3px\] {
  margin-right: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:margin-right(4)
hover:margin-right(4)
lg:focus:margin-right(4)

margin-bottom

Sets bottom margin.

Syntax

syntax

margin-bottom(value)
margin-bottom[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	keyword	auto
	var(--name)	See type

Examples and generated CSS

expressions

margin-bottom(4)
margin-bottom[3px]

Generated CSS

.margin-bottom\(4\) {
  margin-bottom: var(--croff-spacing-4);
}

.margin-bottom\[3px\] {
  margin-bottom: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:margin-bottom(4)
hover:margin-bottom(4)
lg:focus:margin-bottom(4)

margin-left

Sets left margin.

Syntax

syntax

margin-left(value)
margin-left[raw-css]

Accepted values

Argument	Type	Values
`value`	spacing token	0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px
	keyword	auto
	var(--name)	See type

Examples and generated CSS

expressions

margin-left(4)
margin-left[3px]

Generated CSS

.margin-left\(4\) {
  margin-left: var(--croff-spacing-4);
}

.margin-left\[3px\] {
  margin-left: 3px;
}

Theme behavior

Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:margin-left(4)
hover:margin-left(4)
lg:focus:margin-left(4)