Skip to main content

Spacing

Set container spacing with rapid

How to apply spacing​

You can apply padding in the x axis (horizontal), y axis (vertical) or you can individually apply padding to the left, right, top or bottom with the following symbol pattern p[x/y/l/r/t/b]-[range]. To apply margin you just need to replace the p with m. Here is the following symbol pattern for margin m[x/y/l/r/t/b]-[range]

Spacing example​

RapidContainer(
  styles: "px-4 my-4",
  child: MyWidget()
);

Padding​

Padding X​

To apply padding in the horizontal axis you can use the following pattern px-[range]. Here are all the accepted symbols

  • px-0
  • px-1
  • px-2
  • px-3
  • px-4
  • px-5
  • px-6
  • px-7
  • px-8
  • px-9
  • px-10
  • px-11
  • px-12
  • px-14
  • px-16
  • px-20
  • px-24
  • px-28
  • px-32
  • px-36
  • px-40
  • px-44
  • px-48
  • px-52
  • px-56
  • px-60
  • px-64
  • px-72
  • px-80
  • px-96

Padding Y​

To apply padding in the vertical axis you can use the following pattern py-[range]. Here are all the accepted symbols

  • py-0
  • py-1
  • py-2
  • py-3
  • py-4
  • py-5
  • py-6
  • py-7
  • py-8
  • py-9
  • py-10
  • py-11
  • py-12
  • py-14
  • py-16
  • py-20
  • py-24
  • py-28
  • py-32
  • py-36
  • py-40
  • py-44
  • py-48
  • py-52
  • py-56
  • py-60
  • py-64
  • py-72
  • py-80
  • py-96

Padding Left​

To apply padding on the left you can use the following pattern pl-[range]. Here are all the accepted symbols

  • pl-0
  • pl-1
  • pl-2
  • pl-3
  • pl-4
  • pl-5
  • pl-6
  • pl-7
  • pl-8
  • pl-9
  • pl-10
  • pl-11
  • pl-12
  • pl-14
  • pl-16
  • pl-20
  • pl-24
  • pl-28
  • pl-32
  • pl-36
  • pl-40
  • pl-44
  • pl-48
  • pl-52
  • pl-56
  • pl-60
  • pl-64
  • pl-72
  • pl-80
  • pl-96

Padding Right​

To apply padding on the right you can use the following pattern pr-[range]. Here are all the accepted symbols

  • pr-0
  • pr-1
  • pr-2
  • pr-3
  • pr-4
  • pr-5
  • pr-6
  • pr-7
  • pr-8
  • pr-9
  • pr-10
  • pr-11
  • pr-12
  • pr-14
  • pr-16
  • pr-20
  • pr-24
  • pr-28
  • pr-32
  • pr-36
  • pr-40
  • pr-44
  • pr-48
  • pr-52
  • pr-56
  • pr-60
  • pr-64
  • pr-72
  • pr-80
  • pr-96

Padding Top​

To apply padding on the top you can use the following pattern pt-[range]. Here are all the accepted symbols

  • pt-0
  • pt-1
  • pt-2
  • pt-3
  • pt-4
  • pt-5
  • pt-6
  • pt-7
  • pt-8
  • pt-9
  • pt-10
  • pt-11
  • pt-12
  • pt-14
  • pt-16
  • pt-20
  • pt-24
  • pt-28
  • pt-32
  • pt-36
  • pt-40
  • pt-44
  • pt-48
  • pt-52
  • pt-56
  • pt-60
  • pt-64
  • pt-72
  • pt-80
  • pt-96

Padding Bottom​

To apply padding on the bottom you can use the following pattern pb-[range]. Here are all the accepted symbols

  • pb-0
  • pb-1
  • pb-2
  • pb-3
  • pb-4
  • pb-5
  • pb-6
  • pb-7
  • pb-8
  • pb-9
  • pb-10
  • pb-11
  • pb-12
  • pb-14
  • pb-16
  • pb-20
  • pb-24
  • pb-28
  • pb-32
  • pb-36
  • pb-40
  • pb-44
  • pb-48
  • pb-52
  • pb-56
  • pb-60
  • pb-64
  • pb-72
  • pb-80
  • pb-96

Margin​

Margin X​

To apply margin in the horizontal axis you can use the following pattern mx-[range]. Here are all the accepted symbols

  • mx-0
  • mx-1
  • mx-2
  • mx-3
  • mx-4
  • mx-5
  • mx-6
  • mx-7
  • mx-8
  • mx-9
  • mx-10
  • mx-11
  • mx-12
  • mx-14
  • mx-16
  • mx-20
  • mx-24
  • mx-28
  • mx-32
  • mx-36
  • mx-40
  • mx-44
  • mx-48
  • mx-52
  • mx-56
  • mx-60
  • mx-64
  • mx-72
  • mx-80
  • mx-96

Margin Y​

To apply margin in the vertical axis you can use the following pattern my-[range]. Here are all the accepted symbols

  • my-0
  • my-1
  • my-2
  • my-3
  • my-4
  • my-5
  • my-6
  • my-7
  • my-8
  • my-9
  • my-10
  • my-11
  • my-12
  • my-14
  • my-16
  • my-20
  • my-24
  • my-28
  • my-32
  • my-36
  • my-40
  • my-44
  • my-48
  • my-52
  • my-56
  • my-60
  • my-64
  • my-72
  • my-80
  • my-96

Margin Left​

To apply margin on the left you can use the following pattern ml-[range]. Here are all the accepted symbols

  • ml-0
  • ml-1
  • ml-2
  • ml-3
  • ml-4
  • ml-5
  • ml-6
  • ml-7
  • ml-8
  • ml-9
  • ml-10
  • ml-11
  • ml-12
  • ml-14
  • ml-16
  • ml-20
  • ml-24
  • ml-28
  • ml-32
  • ml-36
  • ml-40
  • ml-44
  • ml-48
  • ml-52
  • ml-56
  • ml-60
  • ml-64
  • ml-72
  • ml-80
  • ml-96

Margin Right​

To apply margin on the right you can use the following pattern mr-[range]. Here are all the accepted symbols

  • mr-0
  • mr-1
  • mr-2
  • mr-3
  • mr-4
  • mr-5
  • mr-6
  • mr-7
  • mr-8
  • mr-9
  • mr-10
  • mr-11
  • mr-12
  • mr-14
  • mr-16
  • mr-20
  • mr-24
  • mr-28
  • mr-32
  • mr-36
  • mr-40
  • mr-44
  • mr-48
  • mr-52
  • mr-56
  • mr-60
  • mr-64
  • mr-72
  • mr-80
  • mr-96

Margin Top​

To apply margin on the top you can use the following pattern mt-[range]. Here are all the accepted symbols

  • mt-0
  • mt-1
  • mt-2
  • mt-3
  • mt-4
  • mt-5
  • mt-6
  • mt-7
  • mt-8
  • mt-9
  • mt-10
  • mt-11
  • mt-12
  • mt-14
  • mt-16
  • mt-20
  • mt-24
  • mt-28
  • mt-32
  • mt-36
  • mt-40
  • mt-44
  • mt-48
  • mt-52
  • mt-56
  • mt-60
  • mt-64
  • mt-72
  • mt-80
  • mt-96

Margin Bottom​

To apply margin on the bottom you can use the following pattern mb-[range]. Here are all the accepted symbols

  • mb-0
  • mb-1
  • mb-2
  • mb-3
  • mb-4
  • mb-5
  • mb-6
  • mb-7
  • mb-8
  • mb-9
  • mb-10
  • mb-11
  • mb-12
  • mb-14
  • mb-16
  • mb-20
  • mb-24
  • mb-28
  • mb-32
  • mb-36
  • mb-40
  • mb-44
  • mb-48
  • mb-52
  • mb-56
  • mb-60
  • mb-64
  • mb-72
  • mb-80
  • mb-96

Range to PX​

  • [symbol]-0 = 0px
  • [symbol]-1 = 4px
  • [symbol]-2 = 8px
  • [symbol]-3 = 12px
  • [symbol]-4 = 16px
  • [symbol]-5 = 20px
  • [symbol]-6 = 24px
  • [symbol]-7 = 28px
  • [symbol]-8 = 32px
  • [symbol]-9 = 36px
  • [symbol]-10 = 40px
  • [symbol]-11 = 44px
  • [symbol]-12 = 48px
  • [symbol]-14 = 56px
  • [symbol]-16 = 65px
  • [symbol]-20 = 80px
  • [symbol]-24 = 96px
  • [symbol]-28 = 112px
  • [symbol]-32 = 128px
  • [symbol]-36 = 144px
  • [symbol]-40 = 160px
  • [symbol]-44 = 176px
  • [symbol]-48 = 192px
  • [symbol]-52 = 208px
  • [symbol]-56 = 224px
  • [symbol]-60 = 240px
  • [symbol]-64 = 256px
  • [symbol]-72 = 288px
  • [symbol]-80 = 320px
  • [symbol]-96 = 384px