f-m-{size}: margin:{size}

f-m-t-{size}: margin-top:{size}

f-m-b-{size}: margin-bottom:{size}

f-m-l-{size}: margin-left:{size}

f-m-r-{size}: margin-right:{size}

<div f-m-l-10px f-m-t-2px> </div>
<div f-m-l-10px f-m-t-4px> </div>
<div f-m-l-10px f-m-t-6px> </div>
<div f-m-l-10px f-m-t-8px> </div>
<div f-m-l-10px f-m-t-10px> </div>
<div f-m-l-10px f-m-t-12px> </div>
<div f-m-l-10px f-m-t-14px> </div>
<div f-m-l-10px f-m-t-16px> </div>

Padding supports up sizes between 1px and 31px

f-p-{size}: padding:{size}

f-p-t-{size}: padding-top:{size}

f-p-b-{size}: padding-bottom:{size}

f-p-l-{size}: padding-left:{size}

f-p-r-{size}: padding-right:{size}

<div  f-m-5px f-w-40px f-p-t-2px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>
<div  f-m-5px f-w-40px f-p-t-6px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>
<div  f-m-5px f-w-40px f-p-t-10px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>
<div  f-m-5px f-w-40px f-p-t-15px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>
<div  f-m-5px f-w-40px f-p-t-18px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>
<div  f-m-5px f-w-40px f-p-t-20px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>
<div  f-m-5px f-w-40px f-p-t-26px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>
<div  f-m-5px f-w-40px f-p-t-30px  f-h-100><div f-bg-blue-600 f-h-20px f-w-20px></div> </div>

Oh-Flex does support iOS 11's constant(safe-area-inset-right) - to avoid having content under that god awful black toe at the top of the iPhone when it's rotated.

You'll need the following meta in your head for this to work

<meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">

```

Only want the padding-margin features of Oh-flex?

<link href="https://unpkg.com/oh-flex/lib/chunks/_padding-margin.css" rel="stylesheet" />