Section 4 Spacing

Apply margin and padding in a uniform manner using rem units.

phtn spacing classes begin with either m or p:

m: margin
p: padding

These can be composed with directional modifiers:

h: horizontal
v: vertical
r: right
b: bottom

(phtn applies spacing primarily in the bottom and right directions.) Examples of composed spacing classes:

mh: apply margin in the horizontal directions (left and right)
pv: apply padding in vertical directions (top and bottom)
mb: apply margin in the bottom direction
pr: apply padding in the right direction

Optionally compose with a numeric modifier (0 through 6) to multiple the spacing:

m0: zero margin in all directions
ph2: double padding in the horizontal directions
mb3: triple margin in the bottom direction

Source: spacing.css, line 1

Section 4.1 Spacing - Margin

Section 4.1.1 Margin 0

Margin zero

Margin right zero

Margin bottom zero

Margin horizontal zero

Margin vertical zero

<div class="m0">Margin zero</div>
<div class="mr0">Margin right zero</div>
<div class="mb0">Margin bottom zero</div>
<div class="mh0">Margin horizontal zero</div>
<div class="mv0">Margin vertical zero</div>

Source: spacing.css, line 36

Section 4.1.2 Margin 1

Margin one

Margin right one

Margin bottom one

Margin horizontal one

Margin vertical one

<div class="m">Margin one</div>
<div class="mr">Margin right one</div>
<div class="mb">Margin bottom one</div>
<div class="mh">Margin horizontal one</div>
<div class="mv">Margin vertical one</div>

Source: spacing.css, line 68

Section 4.1.3 Margin 2

Margin two

Margin right two

Margin bottom two

Margin horizontal two

Margin vertical two

<div class="m2">Margin two</div>
<div class="mr2">Margin right two</div>
<div class="mb2">Margin bottom two</div>
<div class="mh2">Margin horizontal two</div>
<div class="mv2">Margin vertical two</div>

Source: spacing.css, line 100

Section 4.1.4 Margin 3

Margin three

Margin right three

Margin bottom three

Margin horizontal three

Margin vertical three

<div class="m3">Margin three</div>
<div class="mr3">Margin right three</div>
<div class="mb3">Margin bottom three</div>
<div class="mh3">Margin horizontal three</div>
<div class="mv3">Margin vertical three</div>

Source: spacing.css, line 132

Section 4.1.5 Margin 4

Margin three

Margin right three

Margin bottom three

Margin horizontal three

Margin vertical three

<div class="m4">Margin three</div>
<div class="mr4">Margin right three</div>
<div class="mb4">Margin bottom three</div>
<div class="mh4">Margin horizontal three</div>
<div class="mv4">Margin vertical three</div>

Source: spacing.css, line 164

Section 4.1.6 Margin 5

Margin three

Margin right three

Margin bottom three

Margin horizontal three

Margin vertical three

<div class="m5">Margin three</div>
<div class="mr5">Margin right three</div>
<div class="mb5">Margin bottom three</div>
<div class="mh5">Margin horizontal three</div>
<div class="mv5">Margin vertical three</div>

Source: spacing.css, line 196

Section 4.1.7 Margin 6

Margin three

Margin right three

Margin bottom three

Margin horizontal three

Margin vertical three

<div class="m6">Margin three</div>
<div class="mr6">Margin right three</div>
<div class="mb6">Margin bottom three</div>
<div class="mh6">Margin horizontal three</div>
<div class="mv6">Margin vertical three</div>

Source: spacing.css, line 228

Section 4.1.8 Margin Auto

Sample text

<p class="mha" style="max-width: 100px">Sample text</p>

Source: spacing.css, line 260

Section 4.2 Spacing - Padding

Section 4.2.1 Padding 0

Padding zero

Padding right zero

Padding bottom zero

Padding horizontal zero

Padding vertical zero

<div class="p0">Padding zero</div>
<div class="pr0">Padding right zero</div>
<div class="pb0">Padding bottom zero</div>
<div class="ph0">Padding horizontal zero</div>
<div class="pv0">Padding vertical zero</div>

Source: spacing.css, line 273

Section 4.2.2 Padding 1

Padding one

Padding right one

Padding bottom one

Padding horizontal one

Padding vertical one

<div class="p">Padding one</div>
<div class="pr">Padding right one</div>
<div class="pb">Padding bottom one</div>
<div class="ph">Padding horizontal one</div>
<div class="pv">Padding vertical one</div>

Source: spacing.css, line 305

Section 4.2.3 Padding 2

Padding two

Padding right two

Padding bottom two

Padding horizontal two

Padding vertical two

<div class="p2">Padding two</div>
<div class="pr2">Padding right two</div>
<div class="pb2">Padding bottom two</div>
<div class="ph2">Padding horizontal two</div>
<div class="pv2">Padding vertical two</div>

Source: spacing.css, line 337

Section 4.2.4 Padding 3

Padding three

Padding right three

Padding bottom three

Padding horizontal three

Padding vertical three

<div class="p3">Padding three</div>
<div class="pr3">Padding right three</div>
<div class="pb3">Padding bottom three</div>
<div class="ph3">Padding horizontal three</div>
<div class="pv3">Padding vertical three</div>

Source: spacing.css, line 369

Section 4.2.5 Padding 4

Padding three

Padding right three

Padding bottom three

Padding horizontal three

Padding vertical three

<div class="p4">Padding three</div>
<div class="pr4">Padding right three</div>
<div class="pb4">Padding bottom three</div>
<div class="ph4">Padding horizontal three</div>
<div class="pv4">Padding vertical three</div>

Source: spacing.css, line 401

Section 4.2.6 Padding 5

Padding three

Padding right three

Padding bottom three

Padding horizontal three

Padding vertical three

<div class="p5">Padding three</div>
<div class="pr5">Padding right three</div>
<div class="pb5">Padding bottom three</div>
<div class="ph5">Padding horizontal three</div>
<div class="pv5">Padding vertical three</div>

Source: spacing.css, line 433

Section 4.2.7 Padding 6

Padding three

Padding right three

Padding bottom three

Padding horizontal three

Padding vertical three

<div class="p6">Padding three</div>
<div class="pr6">Padding right three</div>
<div class="pb6">Padding bottom three</div>
<div class="ph6">Padding horizontal three</div>
<div class="pv6">Padding vertical three</div>

Source: spacing.css, line 465