Padding
Spacing outside element's border.
Import​
src/screens/Component.js
import { w } from "nativeflowcss";
Properties​
| Object | Native Properties |
|---|---|
| p.p_px | { padding: 1 } |
| p.px_px | { paddingLeft: 1, paddingRight: 1 } |
| p.py_px | { paddingTop: 1, paddingBottom: 1 } |
| p.pt_px | { paddingTop: 1 } |
| p.pb_px | { paddingBottom: 1 } |
| p.pr_px | { paddingRight: 1 } |
| p.pl_px | { paddingLeft: 1 } |
| p.ps_px | { paddingStart: 1 } |
| p.pe_px | { paddingEnd: 1 } |
| p.p_0 | { padding: 0 } |
| p.px_0 | { paddingLeft: 0, paddingRight: 0 } |
| p.py_0 | { paddingTop: 0, paddingBottom: 0 } |
| p.pt_0 | { paddingTop: 0 } |
| p.pb_0 | { paddingBottom: 0 } |
| p.pr_0 | { paddingRight: 0 } |
| p.pl_0 | { paddingLeft: 0 } |
| p.ps_0 | { paddingStart: 0 } |
| p.pe_0 | { paddingEnd: 0 } |
| p.p_1 | { padding: 4 } |
| p.px_1 | { paddingLeft: 4, paddingRight: 4 } |
| p.py_1 | { paddingTop: 4, paddingBottom: 4 } |
| p.pt_1 | { paddingTop: 4 } |
| p.pb_1 | { paddingBottom: 4 } |
| p.pr_1 | { paddingRight: 4 } |
| p.pl_1 | { paddingLeft: 4 } |
| p.ps_1 | { paddingStart: 4 } |
| p.pe_1 | { paddingEnd: 4 } |
| p.p_2 | { padding: 8 } |
| p.px_2 | { paddingLeft: 8, paddingRight: 8 } |
| p.py_2 | { paddingTop: 8, paddingBottom: 8 } |
| p.pt_2 | { paddingTop: 8 } |
| p.pb_2 | { paddingBottom: 8 } |
| p.pr_2 | { paddingRight: 8 } |
| p.pl_2 | { paddingLeft: 8 } |
| p.ps_2 | { paddingStart: 8 } |
| p.pe_2 | { paddingEnd: 8 } |
| p.p_3 | { padding: 12 } |
| p.px_3 | { paddingLeft: 12, paddingRight: 12 } |
| p.py_3 | { paddingTop: 12, paddingBottom: 12 } |
| p.pt_3 | { paddingTop: 12 } |
| p.pb_3 | { paddingBottom: 12 } |
| p.pr_3 | { paddingRight: 12 } |
| p.pl_3 | { paddingLeft: 12 } |
| p.ps_3 | { paddingStart: 12 } |
| p.pe_3 | { paddingEnd: 12 } |
| p.p_4 | { padding: 16 } |
| p.px_4 | { paddingLeft: 16, paddingRight: 16 } |
| p.py_4 | { paddingTop: 16, paddingBottom: 16 } |
| p.pt_4 | { paddingTop: 16 } |
| p.pb_4 | { paddingBottom: 16 } |
| p.pr_4 | { paddingRight: 16 } |
| p.pl_4 | { paddingLeft: 16 } |
| p.ps_4 | { paddingStart: 16 } |
| p.pe_4 | { paddingEnd: 16 } |
| p.p_5 | { padding: 20 } |
| p.px_5 | { paddingLeft: 20, paddingRight: 20 } |
| p.py_5 | { paddingTop: 20, paddingBottom: 20 } |
| p.pt_5 | { paddingTop: 20 } |
| p.pb_5 | { paddingBottom: 20 } |
| p.pr_5 | { paddingRight: 20 } |
| p.pl_5 | { paddingLeft: 20 } |
| p.ps_5 | { paddingStart: 20 } |
| p.pe_5 | { paddingEnd: 20 } |
| p.p_6 | { padding: 24 } |
| p.px_6 | { paddingLeft: 24, paddingRight: 24 } |
| p.py_6 | { paddingTop: 24, paddingBottom: 24 } |
| p.pt_6 | { paddingTop: 24 } |
| p.pb_6 | { paddingBottom: 24 } |
| p.pr_6 | { paddingRight: 24 } |
| p.pl_6 | { paddingLeft: 24 } |
| p.ps_6 | { paddingStart: 24 } |
| p.pe_6 | { paddingEnd: 24 } |
| p.p_7 | { padding: 28 } |
| p.px_7 | { paddingLeft: 28, paddingRight: 28 } |
| p.py_7 | { paddingTop: 28, paddingBottom: 28 } |
| p.pt_7 | { paddingTop: 28 } |
| p.pb_7 | { paddingBottom: 28 } |
| p.pr_7 | { paddingRight: 28 } |
| p.pl_7 | { paddingLeft: 28 } |
| p.ps_7 | { paddingStart: 28 } |
| p.pe_7 | { paddingEnd: 28 } |
| p.p_8 | { padding: 32 } |
| p.px_8 | { paddingLeft: 32, paddingRight: 32 } |
| p.py_8 | { paddingTop: 32, paddingBottom: 32 } |
| p.pt_8 | { paddingTop: 32 } |
| p.pb_8 | { paddingBottom: 32 } |
| p.pr_8 | { paddingRight: 32 } |
| p.pl_8 | { paddingLeft: 32 } |
| p.ps_8 | { paddingStart: 32 } |
| p.pe_8 | { paddingEnd: 32 } |
| p.p_9 | { padding: 36 } |
| p.px_9 | { paddingLeft: 36, paddingRight: 36 } |
| p.py_9 | { paddingTop: 36, paddingBottom: 36 } |
| p.pt_9 | { paddingTop: 36 } |
| p.pb_9 | { paddingBottom: 36 } |
| p.pr_9 | { paddingRight: 36 } |
| p.pl_9 | { paddingLeft: 36 } |
| p.ps_9 | { paddingStart: 36 } |
| p.pe_9 | { paddingEnd: 36 } |
| p.p_10 | { padding: 40 } |
| p.px_10 | { paddingLeft: 40, paddingRight: 40 } |
| p.py_10 | { paddingTop: 40, paddingBottom: 40 } |
| p.pt_10 | { paddingTop: 40 } |
| p.pb_10 | { paddingBottom: 40 } |
| p.pr_10 | { paddingRight: 40 } |
| p.pl_10 | { paddingLeft: 40 } |
| p.ps_10 | { paddingStart: 40 } |
| p.pe_10 | { paddingEnd: 40 } |
| p.p_11 | { padding: 44 } |
| p.px_11 | { paddingLeft: 44, paddingRight: 44 } |
| p.py_11 | { paddingTop: 44, paddingBottom: 44 } |
| p.pt_11 | { paddingTop: 44 } |
| p.pb_11 | { paddingBottom: 44 } |
| p.pr_11 | { paddingRight: 44 } |
| p.pl_11 | { paddingLeft: 44 } |
| p.ps_11 | { paddingStart: 44 } |
| p.pe_11 | { paddingEnd: 44 } |
| p.p_12 | { padding: 48 } |
| p.px_12 | { paddingLeft: 48, paddingRight: 48 } |
| p.py_12 | { paddingTop: 48, paddingBottom: 48 } |
| p.pt_12 | { paddingTop: 48 } |
| p.pb_12 | { paddingBottom: 48 } |
| p.pr_12 | { paddingRight: 48 } |
| p.pl_12 | { paddingLeft: 48 } |
| p.ps_12 | { paddingStart: 48 } |
| p.pe_12 | { paddingEnd: 48 } |
| p.p_14 | { padding: 56 } |
| p.px_14 | { paddingLeft: 56, paddingRight: 56 } |
| p.py_14 | { paddingTop: 56, paddingBottom: 56 } |
| p.pt_14 | { paddingTop: 56 } |
| p.pb_14 | { paddingBottom: 56 } |
| p.pr_14 | { paddingRight: 56 } |
| p.pl_14 | { paddingLeft: 56 } |
| p.ps_14 | { paddingStart: 56 } |
| p.pe_14 | { paddingEnd: 56 } |
| p.p_16 | { padding: 64 } |
| p.px_16 | { paddingLeft: 64, paddingRight: 64 } |
| p.py_16 | { paddingTop: 64, paddingBottom: 64 } |
| p.pt_16 | { paddingTop: 64 } |
| p.pb_16 | { paddingBottom: 64 } |
| p.pr_16 | { paddingRight: 64 } |
| p.pl_16 | { paddingLeft: 64 } |
| p.ps_16 | { paddingStart: 64 } |
| p.pe_16 | { paddingEnd: 64 } |
| p.p_20 | { padding: 80 } |
| p.px_20 | { paddingLeft: 80, paddingRight: 80 } |
| p.py_20 | { paddingTop: 80, paddingBottom: 80 } |
| p.pt_20 | { paddingTop: 80 } |
| p.pb_20 | { paddingBottom: 80 } |
| p.pr_20 | { paddingRight: 80 } |
| p.pl_20 | { paddingLeft: 80 } |
| p.ps_20 | { paddingStart: 80 } |
| p.pe_20 | { paddingEnd: 80 } |
| p.p_24 | { padding: 96 } |
| p.px_24 | { paddingLeft: 96, paddingRight: 96 } |
| p.py_24 | { paddingTop: 96, paddingBottom: 96 } |
| p.pt_24 | { paddingTop: 96 } |
| p.pb_24 | { paddingBottom: 96 } |
| p.pr_24 | { paddingRight: 96 } |
| p.pl_24 | { paddingLeft: 96 } |
| p.ps_24 | { paddingStart: 96 } |
| p.pe_24 | { paddingEnd: 96 } |
| p.p_28 | { padding: 112 } |
| p.px_28 | { paddingLeft: 112, paddingRight: 112 } |
| p.py_28 | { paddingTop: 112, paddingBottom: 112 } |
| p.pt_28 | { paddingTop: 112 } |
| p.pb_28 | { paddingBottom: 112 } |
| p.pr_28 | { paddingRight: 112 } |
| p.pl_28 | { paddingLeft: 112 } |
| p.ps_28 | { paddingStart: 112 } |
| p.pe_28 | { paddingEnd: 112 } |
| p.p_32 | { padding: 128 } |
| p.px_32 | { paddingLeft: 128, paddingRight: 128 } |
| p.py_32 | { paddingTop: 128, paddingBottom: 128 } |
| p.pt_32 | { paddingTop: 128 } |
| p.pb_32 | { paddingBottom: 128 } |
| p.pr_32 | { paddingRight: 128 } |
| p.pl_32 | { paddingLeft: 128 } |
| p.ps_32 | { paddingStart: 128 } |
| p.pe_32 | { paddingEnd: 128 } |
| p.p_36 | { padding: 144 } |
| p.px_36 | { paddingLeft: 144, paddingRight: 144 } |
| p.py_36 | { paddingTop: 144, paddingBottom: 144 } |
| p.pt_36 | { paddingTop: 144 } |
| p.pb_36 | { paddingBottom: 144 } |
| p.pr_36 | { paddingRight: 144 } |
| p.pl_36 | { paddingLeft: 144 } |
| p.ps_36 | { paddingStart: 144 } |
| p.pe_36 | { paddingEnd: 144 } |
| p.p_40 | { padding: 160 } |
| p.px_40 | { paddingLeft: 160, paddingRight: 160 } |
| p.py_40 | { paddingTop: 160, paddingBottom: 160 } |
| p.pt_40 | { paddingTop: 160 } |
| p.pb_40 | { paddingBottom: 160 } |
| p.pr_40 | { paddingRight: 160 } |
| p.pl_40 | { paddingLeft: 160 } |
| p.ps_40 | { paddingStart: 160 } |
| p.pe_40 | { paddingEnd: 160 } |
| p.p_44 | { padding: 176 } |
| p.px_44 | { paddingLeft: 176, paddingRight: 176 } |
| p.py_44 | { paddingTop: 176, paddingBottom: 176 } |
| p.pt_44 | { paddingTop: 176 } |
| p.pb_44 | { paddingBottom: 176 } |
| p.pr_44 | { paddingRight: 176 } |
| p.pl_44 | { paddingLeft: 176 } |
| p.ps_44 | { paddingStart: 176 } |
| p.pe_44 | { paddingEnd: 176 } |
| p.p_48 | { padding: 192 } |
| p.px_48 | { paddingLeft: 192, paddingRight: 192 } |
| p.py_48 | { paddingTop: 192, paddingBottom: 192 } |
| p.pt_48 | { paddingTop: 192 } |
| p.pb_48 | { paddingBottom: 192 } |
| p.pr_48 | { paddingRight: 192 } |
| p.pl_48 | { paddingLeft: 192 } |
| p.ps_48 | { paddingStart: 192 } |
| p.pe_48 | { paddingEnd: 192 } |
| p.p_52 | { padding: 208 } |
| p.px_52 | { paddingLeft: 208, paddingRight: 208 } |
| p.py_52 | { paddingTop: 208, paddingBottom: 208 } |
| p.pt_52 | { paddingTop: 208 } |
| p.pb_52 | { paddingBottom: 208 } |
| p.pr_52 | { paddingRight: 208 } |
| p.pl_52 | { paddingLeft: 208 } |
| p.ps_52 | { paddingStart: 208 } |
| p.pe_52 | { paddingEnd: 208 } |
| p.p_56 | { padding: 224 } |
| p.px_56 | { paddingLeft: 224, paddingRight: 224 } |
| p.py_56 | { paddingTop: 224, paddingBottom: 224 } |
| p.pt_56 | { paddingTop: 224 } |
| p.pb_56 | { paddingBottom: 224 } |
| p.pr_56 | { paddingRight: 224 } |
| p.pl_56 | { paddingLeft: 224 } |
| p.ps_56 | { paddingStart: 224 } |
| p.pe_56 | { paddingEnd: 224 } |
| p.p_60 | { padding: 240 } |
| p.px_60 | { paddingLeft: 240, paddingRight: 240 } |
| p.py_60 | { paddingTop: 240, paddingBottom: 240 } |
| p.pt_60 | { paddingTop: 240 } |
| p.pb_60 | { paddingBottom: 240 } |
| p.pr_60 | { paddingRight: 240 } |
| p.pl_60 | { paddingLeft: 240 } |
| p.ps_60 | { paddingStart: 240 } |
| p.pe_60 | { paddingEnd: 240 } |
| p.p_64 | { padding: 256 } |
| p.px_64 | { paddingLeft: 256, paddingRight: 256 } |
| p.py_64 | { paddingTop: 256, paddingBottom: 256 } |
| p.pt_64 | { paddingTop: 256 } |
| p.pb_64 | { paddingBottom: 256 } |
| p.pr_64 | { paddingRight: 256 } |
| p.pl_64 | { paddingLeft: 256 } |
| p.ps_64 | { paddingStart: 256 } |
| p.pe_64 | { paddingEnd: 256 } |
| p.p_72 | { padding: 288 } |
| p.px_72 | { paddingLeft: 288, paddingRight: 288 } |
| p.py_72 | { paddingTop: 288, paddingBottom: 288 } |
| p.pt_72 | { paddingTop: 288 } |
| p.pb_72 | { paddingBottom: 288 } |
| p.pr_72 | { paddingRight: 288 } |
| p.pl_72 | { paddingLeft: 288 } |
| p.ps_72 | { paddingStart: 288 } |
| p.pe_72 | { paddingEnd: 288 } |
| p.p_80 | { padding: 320 } |
| p.px_80 | { paddingLeft: 320, paddingRight: 320 } |
| p.py_80 | { paddingTop: 320, paddingBottom: 320 } |
| p.pt_80 | { paddingTop: 320 } |
| p.pb_80 | { paddingBottom: 320 } |
| p.pr_80 | { paddingRight: 320 } |
| p.pl_80 | { paddingLeft: 320 } |
| p.ps_80 | { paddingStart: 320 } |
| p.pe_80 | { paddingEnd: 320 } |
| p.p_96 | { padding: 384 } |
| p.px_96 | { paddingLeft: 384, paddingRight: 384 } |
| p.py_96 | { paddingTop: 384, paddingBottom: 384 } |
| p.pt_96 | { paddingTop: 384 } |
| p.pb_96 | { paddingBottom: 384 } |
| p.pr_96 | { paddingRight: 384 } |
| p.pl_96 | { paddingLeft: 384 } |
| p.ps_96 | { paddingStart: 384 } |
| p.pe_96 | { paddingEnd: 384 } |
Custom Padding​
Custom properties are usually rendered using _(customValue)
Padding in React Native only supports the default
unitlessvalues (auto,fit-content,max-content,full)
| Object | Native Properties |
|---|---|
| p.p_(customValue) | { padding: customValue } |
| p.px_(customValue) | { paddingLeft: customValue, paddingRight: customValue } |
| p.py_(customValue) | { paddingTop: customValue, paddingBottom: customValue } |
| p.pt_(customValue) | { paddingTop: customValue } |
| p.pb_(customValue) | { paddingBottom: customValue } |
| p.pr_(customValue) | { paddingRight: customValue } |
| p.pl_(customValue) | { paddingLeft: customValue } |
| p.ps_(customValue) | { paddingStart: customValue } |
| p.pe_(customValue) | { paddingEnd: customValue } |