Margin
Spacing outside element's border.
Import​
src/screens/Component.js
import { w } from "nativeflowcss";
Properties​
| Object | Native Properties |
|---|---|
| m.m_px | { margin: 1 } |
| m.mx_px | { marginLeft: 1, marginRight: 1 } |
| m.my_px | { marginTop: 1, marginBottom: 1 } |
| m.mt_px | { marginTop: 1 } |
| m.mb_px | { marginBottom: 1 } |
| m.mr_px | { marginRight: 1 } |
| m.ml_px | { marginLeft: 1 } |
| m.ms_px | { marginStart: 1 } |
| m.me_px | { marginEnd: 1 } |
| m.m_0 | { margin: 0 } |
| m.mx_0 | { marginLeft: 0, marginRight: 0 } |
| m.my_0 | { marginTop: 0, marginBottom: 0 } |
| m.mt_0 | { marginTop: 0 } |
| m.mb_0 | { marginBottom: 0 } |
| m.mr_0 | { marginRight: 0 } |
| m.ml_0 | { marginLeft: 0 } |
| m.ms_0 | { marginStart: 0 } |
| m.me_0 | { marginEnd: 0 } |
| m.m_1 | { margin: 4 } |
| m.mx_1 | { marginLeft: 4, marginRight: 4 } |
| m.my_1 | { marginTop: 4, marginBottom: 4 } |
| m.mt_1 | { marginTop: 4 } |
| m.mb_1 | { marginBottom: 4 } |
| m.mr_1 | { marginRight: 4 } |
| m.ml_1 | { marginLeft: 4 } |
| m.ms_1 | { marginStart: 4 } |
| m.me_1 | { marginEnd: 4 } |
| m.m_2 | { margin: 8 } |
| m.mx_2 | { marginLeft: 8, marginRight: 8 } |
| m.my_2 | { marginTop: 8, marginBottom: 8 } |
| m.mt_2 | { marginTop: 8 } |
| m.mb_2 | { marginBottom: 8 } |
| m.mr_2 | { marginRight: 8 } |
| m.ml_2 | { marginLeft: 8 } |
| m.ms_2 | { marginStart: 8 } |
| m.me_2 | { marginEnd: 8 } |
| m.m_3 | { margin: 12 } |
| m.mx_3 | { marginLeft: 12, marginRight: 12 } |
| m.my_3 | { marginTop: 12, marginBottom: 12 } |
| m.mt_3 | { marginTop: 12 } |
| m.mb_3 | { marginBottom: 12 } |
| m.mr_3 | { marginRight: 12 } |
| m.ml_3 | { marginLeft: 12 } |
| m.ms_3 | { marginStart: 12 } |
| m.me_3 | { marginEnd: 12 } |
| m.m_4 | { margin: 16 } |
| m.mx_4 | { marginLeft: 16, marginRight: 16 } |
| m.my_4 | { marginTop: 16, marginBottom: 16 } |
| m.mt_4 | { marginTop: 16 } |
| m.mb_4 | { marginBottom: 16 } |
| m.mr_4 | { marginRight: 16 } |
| m.ml_4 | { marginLeft: 16 } |
| m.ms_4 | { marginStart: 16 } |
| m.me_4 | { marginEnd: 16 } |
| m.m_5 | { margin: 20 } |
| m.mx_5 | { marginLeft: 20, marginRight: 20 } |
| m.my_5 | { marginTop: 20, marginBottom: 20 } |
| m.mt_5 | { marginTop: 20 } |
| m.mb_5 | { marginBottom: 20 } |
| m.mr_5 | { marginRight: 20 } |
| m.ml_5 | { marginLeft: 20 } |
| m.ms_5 | { marginStart: 20 } |
| m.me_5 | { marginEnd: 20 } |
| m.m_6 | { margin: 24 } |
| m.mx_6 | { marginLeft: 24, marginRight: 24 } |
| m.my_6 | { marginTop: 24, marginBottom: 24 } |
| m.mt_6 | { marginTop: 24 } |
| m.mb_6 | { marginBottom: 24 } |
| m.mr_6 | { marginRight: 24 } |
| m.ml_6 | { marginLeft: 24 } |
| m.ms_6 | { marginStart: 24 } |
| m.me_6 | { marginEnd: 24 } |
| m.m_7 | { margin: 28 } |
| m.mx_7 | { marginLeft: 28, marginRight: 28 } |
| m.my_7 | { marginTop: 28, marginBottom: 28 } |
| m.mt_7 | { marginTop: 28 } |
| m.mb_7 | { marginBottom: 28 } |
| m.mr_7 | { marginRight: 28 } |
| m.ml_7 | { marginLeft: 28 } |
| m.ms_7 | { marginStart: 28 } |
| m.me_7 | { marginEnd: 28 } |
| m.m_8 | { margin: 32 } |
| m.mx_8 | { marginLeft: 32, marginRight: 32 } |
| m.my_8 | { marginTop: 32, marginBottom: 32 } |
| m.mt_8 | { marginTop: 32 } |
| m.mb_8 | { marginBottom: 32 } |
| m.mr_8 | { marginRight: 32 } |
| m.ml_8 | { marginLeft: 32 } |
| m.ms_8 | { marginStart: 32 } |
| m.me_8 | { marginEnd: 32 } |
| m.m_9 | { margin: 36 } |
| m.mx_9 | { marginLeft: 36, marginRight: 36 } |
| m.my_9 | { marginTop: 36, marginBottom: 36 } |
| m.mt_9 | { marginTop: 36 } |
| m.mb_9 | { marginBottom: 36 } |
| m.mr_9 | { marginRight: 36 } |
| m.ml_9 | { marginLeft: 36 } |
| m.ms_9 | { marginStart: 36 } |
| m.me_9 | { marginEnd: 36 } |
| m.m_10 | { margin: 40 } |
| m.mx_10 | { marginLeft: 40, marginRight: 40 } |
| m.my_10 | { marginTop: 40, marginBottom: 40 } |
| m.mt_10 | { marginTop: 40 } |
| m.mb_10 | { marginBottom: 40 } |
| m.mr_10 | { marginRight: 40 } |
| m.ml_10 | { marginLeft: 40 } |
| m.ms_10 | { marginStart: 40 } |
| m.me_10 | { marginEnd: 40 } |
| m.m_11 | { margin: 44 } |
| m.mx_11 | { marginLeft: 44, marginRight: 44 } |
| m.my_11 | { marginTop: 44, marginBottom: 44 } |
| m.mt_11 | { marginTop: 44 } |
| m.mb_11 | { marginBottom: 44 } |
| m.mr_11 | { marginRight: 44 } |
| m.ml_11 | { marginLeft: 44 } |
| m.ms_11 | { marginStart: 44 } |
| m.me_11 | { marginEnd: 44 } |
| m.m_12 | { margin: 48 } |
| m.mx_12 | { marginLeft: 48, marginRight: 48 } |
| m.my_12 | { marginTop: 48, marginBottom: 48 } |
| m.mt_12 | { marginTop: 48 } |
| m.mb_12 | { marginBottom: 48 } |
| m.mr_12 | { marginRight: 48 } |
| m.ml_12 | { marginLeft: 48 } |
| m.ms_12 | { marginStart: 48 } |
| m.me_12 | { marginEnd: 48 } |
| m.m_14 | { margin: 56 } |
| m.mx_14 | { marginLeft: 56, marginRight: 56 } |
| m.my_14 | { marginTop: 56, marginBottom: 56 } |
| m.mt_14 | { marginTop: 56 } |
| m.mb_14 | { marginBottom: 56 } |
| m.mr_14 | { marginRight: 56 } |
| m.ml_14 | { marginLeft: 56 } |
| m.ms_14 | { marginStart: 56 } |
| m.me_14 | { marginEnd: 56 } |
| m.m_16 | { margin: 64 } |
| m.mx_16 | { marginLeft: 64, marginRight: 64 } |
| m.my_16 | { marginTop: 64, marginBottom: 64 } |
| m.mt_16 | { marginTop: 64 } |
| m.mb_16 | { marginBottom: 64 } |
| m.mr_16 | { marginRight: 64 } |
| m.ml_16 | { marginLeft: 64 } |
| m.ms_16 | { marginStart: 64 } |
| m.me_16 | { marginEnd: 64 } |
| m.m_20 | { margin: 80 } |
| m.mx_20 | { marginLeft: 80, marginRight: 80 } |
| m.my_20 | { marginTop: 80, marginBottom: 80 } |
| m.mt_20 | { marginTop: 80 } |
| m.mb_20 | { marginBottom: 80 } |
| m.mr_20 | { marginRight: 80 } |
| m.ml_20 | { marginLeft: 80 } |
| m.ms_20 | { marginStart: 80 } |
| m.me_20 | { marginEnd: 80 } |
| m.m_24 | { margin: 96 } |
| m.mx_24 | { marginLeft: 96, marginRight: 96 } |
| m.my_24 | { marginTop: 96, marginBottom: 96 } |
| m.mt_24 | { marginTop: 96 } |
| m.mb_24 | { marginBottom: 96 } |
| m.mr_24 | { marginRight: 96 } |
| m.ml_24 | { marginLeft: 96 } |
| m.ms_24 | { marginStart: 96 } |
| m.me_24 | { marginEnd: 96 } |
| m.m_28 | { margin: 112 } |
| m.mx_28 | { marginLeft: 112, marginRight: 112 } |
| m.my_28 | { marginTop: 112, marginBottom: 112 } |
| m.mt_28 | { marginTop: 112 } |
| m.mb_28 | { marginBottom: 112 } |
| m.mr_28 | { marginRight: 112 } |
| m.ml_28 | { marginLeft: 112 } |
| m.ms_28 | { marginStart: 112 } |
| m.me_28 | { marginEnd: 112 } |
| m.m_32 | { margin: 128 } |
| m.mx_32 | { marginLeft: 128, marginRight: 128 } |
| m.my_32 | { marginTop: 128, marginBottom: 128 } |
| m.mt_32 | { marginTop: 128 } |
| m.mb_32 | { marginBottom: 128 } |
| m.mr_32 | { marginRight: 128 } |
| m.ml_32 | { marginLeft: 128 } |
| m.ms_32 | { marginStart: 128 } |
| m.me_32 | { marginEnd: 128 } |
| m.m_36 | { margin: 144 } |
| m.mx_36 | { marginLeft: 144, marginRight: 144 } |
| m.my_36 | { marginTop: 144, marginBottom: 144 } |
| m.mt_36 | { marginTop: 144 } |
| m.mb_36 | { marginBottom: 144 } |
| m.mr_36 | { marginRight: 144 } |
| m.ml_36 | { marginLeft: 144 } |
| m.ms_36 | { marginStart: 144 } |
| m.me_36 | { marginEnd: 144 } |
| m.m_40 | { margin: 160 } |
| m.mx_40 | { marginLeft: 160, marginRight: 160 } |
| m.my_40 | { marginTop: 160, marginBottom: 160 } |
| m.mt_40 | { marginTop: 160 } |
| m.mb_40 | { marginBottom: 160 } |
| m.mr_40 | { marginRight: 160 } |
| m.ml_40 | { marginLeft: 160 } |
| m.ms_40 | { marginStart: 160 } |
| m.me_40 | { marginEnd: 160 } |
| m.m_44 | { margin: 176 } |
| m.mx_44 | { marginLeft: 176, marginRight: 176 } |
| m.my_44 | { marginTop: 176, marginBottom: 176 } |
| m.mt_44 | { marginTop: 176 } |
| m.mb_44 | { marginBottom: 176 } |
| m.mr_44 | { marginRight: 176 } |
| m.ml_44 | { marginLeft: 176 } |
| m.ms_44 | { marginStart: 176 } |
| m.me_44 | { marginEnd: 176 } |
| m.m_48 | { margin: 192 } |
| m.mx_48 | { marginLeft: 192, marginRight: 192 } |
| m.my_48 | { marginTop: 192, marginBottom: 192 } |
| m.mt_48 | { marginTop: 192 } |
| m.mb_48 | { marginBottom: 192 } |
| m.mr_48 | { marginRight: 192 } |
| m.ml_48 | { marginLeft: 192 } |
| m.ms_48 | { marginStart: 192 } |
| m.me_48 | { marginEnd: 192 } |
| m.m_52 | { margin: 208 } |
| m.mx_52 | { marginLeft: 208, marginRight: 208 } |
| m.my_52 | { marginTop: 208, marginBottom: 208 } |
| m.mt_52 | { marginTop: 208 } |
| m.mb_52 | { marginBottom: 208 } |
| m.mr_52 | { marginRight: 208 } |
| m.ml_52 | { marginLeft: 208 } |
| m.ms_52 | { marginStart: 208 } |
| m.me_52 | { marginEnd: 208 } |
| m.m_56 | { margin: 224 } |
| m.mx_56 | { marginLeft: 224, marginRight: 224 } |
| m.my_56 | { marginTop: 224, marginBottom: 224 } |
| m.mt_56 | { marginTop: 224 } |
| m.mb_56 | { marginBottom: 224 } |
| m.mr_56 | { marginRight: 224 } |
| m.ml_56 | { marginLeft: 224 } |
| m.ms_56 | { marginStart: 224 } |
| m.me_56 | { marginEnd: 224 } |
| m.m_60 | { margin: 240 } |
| m.mx_60 | { marginLeft: 240, marginRight: 240 } |
| m.my_60 | { marginTop: 240, marginBottom: 240 } |
| m.mt_60 | { marginTop: 240 } |
| m.mb_60 | { marginBottom: 240 } |
| m.mr_60 | { marginRight: 240 } |
| m.ml_60 | { marginLeft: 240 } |
| m.ms_60 | { marginStart: 240 } |
| m.me_60 | { marginEnd: 240 } |
| m.m_64 | { margin: 256 } |
| m.mx_64 | { marginLeft: 256, marginRight: 256 } |
| m.my_64 | { marginTop: 256, marginBottom: 256 } |
| m.mt_64 | { marginTop: 256 } |
| m.mb_64 | { marginBottom: 256 } |
| m.mr_64 | { marginRight: 256 } |
| m.ml_64 | { marginLeft: 256 } |
| m.ms_64 | { marginStart: 256 } |
| m.me_64 | { marginEnd: 256 } |
| m.m_72 | { margin: 288 } |
| m.mx_72 | { marginLeft: 288, marginRight: 288 } |
| m.my_72 | { marginTop: 288, marginBottom: 288 } |
| m.mt_72 | { marginTop: 288 } |
| m.mb_72 | { marginBottom: 288 } |
| m.mr_72 | { marginRight: 288 } |
| m.ml_72 | { marginLeft: 288 } |
| m.ms_72 | { marginStart: 288 } |
| m.me_72 | { marginEnd: 288 } |
| m.m_80 | { margin: 320 } |
| m.mx_80 | { marginLeft: 320, marginRight: 320 } |
| m.my_80 | { marginTop: 320, marginBottom: 320 } |
| m.mt_80 | { marginTop: 320 } |
| m.mb_80 | { marginBottom: 320 } |
| m.mr_80 | { marginRight: 320 } |
| m.ml_80 | { marginLeft: 320 } |
| m.ms_80 | { marginStart: 320 } |
| m.me_80 | { marginEnd: 320 } |
| m.m_96 | { margin: 384 } |
| m.mx_96 | { marginLeft: 384, marginRight: 384 } |
| m.my_96 | { marginTop: 384, marginBottom: 384 } |
| m.mt_96 | { marginTop: 384 } |
| m.mb_96 | { marginBottom: 384 } |
| m.mr_96 | { marginRight: 384 } |
| m.ml_96 | { marginLeft: 384 } |
| m.ms_96 | { marginStart: 384 } |
| m.me_96 | { marginEnd: 384 } |
Custom Margins​
Custom properties are usually rendered using _(customValue)
Margin in React native only supports the default
unitlessvalues (auto,fit-content,max-content,full)
| Object | Native Properties |
|---|---|
| m.m_(customValue) | { margin: customValue } |
| m.mx_(customValue) | { marginLeft: customValue, marginRight: customValue } |
| m.my_(customValue) | { marginTop: customValue, marginBottom: customValue } |
| m.mt_(customValue) | { marginTop: customValue } |
| m.mb_(customValue) | { marginBottom: customValue } |
| m.mr_(customValue) | { marginRight: customValue } |
| m.ml_(customValue) | { marginLeft: customValue } |
| m.ms_(customValue) | { marginStart: customValue } |
| m.me_(customValue) | { marginEnd: customValue } |