Padding

Utilities for controlling an element's margin.

Table of classes

Class

Properties

p-0

{ padding: 0 }

p-0.25

{ padding: 1 }

p-0.5

{ padding: 2 }

p-1

{ padding: 4 }

p-1.5

{ padding: 6 }

p-2

{ padding: 8 }

p-2.5

{ padding: 10 }

p-3

{ padding: 12 }

p-3.5

{ padding: 14 }

p-4

{ padding: 16 }

p-5

{ padding: 20 }

p-6

{ padding: 24 }

p-7

{ padding: 28 }

p-8

{ padding: 32 }

p-9

{ padding: 36 }

p-10

{ padding: 40 }

p-11

{ padding: 44 }

p-12

{ padding: 48 }

p-14

{ padding: 56 }

p-16

{ padding: 64 }

p-20

{ padding: 80 }

p-24

{ padding: 96 }

p-28

{ padding: 112 }

p-32

{ padding: 128 }

pt-0

{ paddingTop: 0 }

pt-0.25

{ paddingTop: 1 }

pt-0.5

{ paddingTop: 2 }

pt-1

{ paddingTop: 4 }

pt-1.5

{ paddingTop: 6 }

pt-2

{ paddingTop: 8 }

pt-2.5

{ paddingTop: 10 }

pt-3

{ paddingTop: 12 }

pt-3.5

{ paddingTop: 14 }

pt-4

{ paddingTop: 16 }

pt-5

{ paddingTop: 20 }

pt-6

{ paddingTop: 24 }

pt-7

{ paddingTop: 28 }

pt-8

{ paddingTop: 32 }

pt-9

{ paddingTop: 36 }

pt-10

{ paddingTop: 40 }

pt-11

{ paddingTop: 44 }

pt-12

{ paddingTop: 48 }

pt-14

{ paddingTop: 56 }

pt-16

{ paddingTop: 64 }

pt-20

{ paddingTop: 80 }

pt-24

{ paddingTop: 96 }

pt-28

{ paddingTop: 112 }

pt-32

{ paddingTop: 128 }

pb-0

{ paddingBottom: 0 }

pb-0.25

{ paddingBottom: 1 }

pb-0.5

{ paddingBottom: 2 }

pb-1

{ paddingBottom: 4 }

pb-1.5

{ paddingBottom: 6 }

pb-2

{ paddingBottom: 8 }

pb-2.5

{ paddingBottom: 10 }

pb-3

{ paddingBottom: 12 }

pb-3.5

{ paddingBottom: 14 }

pb-4

{ paddingBottom: 16 }

pb-5

{ paddingBottom: 20 }

pb-6

{ paddingBottom: 24 }

pb-7

{ paddingBottom: 28 }

pb-8

{ paddingBottom: 32 }

pb-9

{ paddingBottom: 36 }

pb-10

{ paddingBottom: 40 }

pb-11

{ paddingBottom: 44 }

pb-12

{ paddingBottom: 48 }

pb-14

{ paddingBottom: 56 }

pb-16

{ paddingBottom: 64 }

pb-20

{ paddingBottom: 80 }

pb-24

{ paddingBottom: 96 }

pb-28

{ paddingBottom: 112 }

pb-32

{ paddingBottom: 128 }

pl-0

{ paddingLeft: 0 }

pl-0.25

{ paddingLeft: 1 }

pl-0.5

{ paddingLeft: 2 }

pl-1

{ paddingLeft: 4 }

pl-1.5

{ paddingLeft: 6 }

pl-2

{ paddingLeft: 8 }

pl-2.5

{ paddingLeft: 10 }

pl-3

{ paddingLeft: 12 }

pl-3.5

{ paddingLeft: 14 }

pl-4

{ paddingLeft: 16 }

pl-5

{ paddingLeft: 20 }

pl-6

{ paddingLeft: 24 }

pl-7

{ paddingLeft: 28 }

pl-8

{ paddingLeft: 32 }

pl-9

{ paddingLeft: 36 }

pl-10

{ paddingLeft: 40 }

pl-11

{ paddingLeft: 44 }

pl-12

{ paddingLeft: 48 }

pl-14

{ paddingLeft: 56 }

pl-16

{ paddingLeft: 64 }

pl-20

{ paddingLeft: 80 }

pl-24

{ paddingLeft: 96 }

pl-28

{ paddingLeft: 112 }

pl-32

{ paddingLeft: 128 }

pr-0

{ paddingRight: 0 }

pr-0.25

{ paddingRight: 1 }

pr-0.5

{ paddingRight: 2 }

pr-1

{ paddingRight: 4 }

pr-1.5

{ paddingRight: 6 }

pr-2

{ paddingRight: 8 }

pr-2.5

{ paddingRight: 10 }

pr-3

{ paddingRight: 12 }

pr-3.5

{ paddingRight: 14 }

pr-4

{ paddingRight: 16 }

pr-5

{ paddingRight: 20 }

pr-6

{ paddingRight: 24 }

pr-7

{ paddingRight: 28 }

pr-8

{ paddingRight: 32 }

pr-9

{ paddingRight: 36 }

pr-10

{ paddingRight: 40 }

pr-11

{ paddingRight: 44 }

pr-12

{ paddingRight: 48 }

pr-14

{ paddingRight: 56 }

pr-16

{ paddingRight: 64 }

pr-20

{ paddingRight: 80 }

pr-24

{ paddingRight: 96 }

pr-28

{ paddingRight: 112 }

pr-32

{ paddingRight: 128 }

py-0

{ paddingVertical: 0 }

py-0.25

{ paddingVertical: 1 }

py-0.5

{ paddingVertical: 2 }

py-1

{ paddingVertical: 4 }

py-1.5

{ paddingVertical: 6 }

py-2

{ paddingVertical: 8 }

py-2.5

{ paddingVertical: 10 }

py-3

{ paddingVertical: 12 }

py-3.5

{ paddingVertical: 14 }

py-4

{ paddingVertical: 16 }

py-5

{ paddingVertical: 20 }

py-6

{ paddingVertical: 24 }

py-7

{ paddingVertical: 28 }

py-8

{ paddingVertical: 32 }

py-9

{ paddingVertical: 36 }

py-10

{ paddingVertical: 40 }

py-11

{ paddingVertical: 44 }

py-12

{ paddingVertical: 48 }

py-14

{ paddingVertical: 56 }

py-16

{ paddingVertical: 64 }

py-20

{ paddingVertical: 80 }

py-24

{ paddingVertical: 96 }

py-28

{ paddingVertical: 112 }

py-32

{ paddingVertical: 128 }

px-0

{ paddingHorizontal: 0 }

px-0.25

{ paddingHorizontal: 1 }

px-0.5

{ paddingHorizontal: 2 }

px-1

{ paddingHorizontal: 4 }

px-1.5

{ paddingHorizontal: 6 }

px-2

{ paddingHorizontal: 8 }

px-2.5

{ paddingHorizontal: 10 }

px-3

{ paddingHorizontal: 12 }

px-3.5

{ paddingHorizontal: 14 }

px-4

{ paddingHorizontal: 16 }

px-5

{ paddingHorizontal: 20 }

px-6

{ paddingHorizontal: 24 }

px-7

{ paddingHorizontal: 28 }

px-8

{ paddingHorizontal: 32 }

px-9

{ paddingHorizontal: 36 }

px-10

{ paddingHorizontal: 40 }

px-11

{ paddingHorizontal: 44 }

px-12

{ paddingHorizontal: 48 }

px-14

{ paddingHorizontal: 56 }

px-16

{ paddingHorizontal: 64 }

px-20

{ paddingHorizontal: 80 }

px-24

{ paddingHorizontal: 96 }

px-28

{ paddingHorizontal: 112 }

px-32

{ paddingHorizontal: 128 }

Customization

info

To get an introduction on how customization works, it is recommended to visit the dedicated page in the documentation

To customize the classes regarding the padding, you go to modify the fields under the property called spacing.

wind.config.js

import {customize} from 'react-native-wind';
customize({  theme: {    spacing: {      container: 23,    },  },});

The library will automatically generate classes for margin and padding called in this way:

• m-container (and all other margin classes for every position prefixed like mt mb...)
• p-container (and all other padding classes for every position prefixed like pt pb...)

All generated classes will have a value of 23

note

Adding a property to spacing will always add a class to both margin and padding because they both refer to the same general values