Borders
<div class="b">b</div>
<div class="bt">bt</div>
<div class="br">br</div>
<div class="bb">bb</div>
<div class="bl">bl</div>
<div class="bx">bx</div>
<div class="by">by</div>
b
bt
br
bb
bl
bx
by
Padding
<div class="p">p</div>
<div class="pt">pt</div>
<div class="pr">pr</div>
<div class="pb">pb</div>
<div class="pl">pl</div>
<div class="px">px</div>
<div class="py">py</div>
p
pt
pr
pb
pl
px
py
Margins
<div class="m">m</div>
<div class="mt">mt</div>
<div class="mr">mr</div>
<div class="mb">mb</div>
<div class="ml">ml</div>
<div class="mx">mx</div>
<div class="my">my</div>
m
mt
mr
mb
ml
mx
my
Negative Margins
<div class="-m">-m</div>
<div class="-mt">-mt</div>
<div class="-mr">-mr</div>
<div class="-mb">-mb</div>
<div class="-ml">-ml</div>
<div class="-mx">-mx</div>
<div class="-my">-my</div>
-m
-mt
-mr
-mb
-ml
-mx
-my
Cancelled Margins
<div class="m m0">m m0</div>
<div class="m mt0">m mt0</div>
<div class="m mr0">m mr0</div>
<div class="m mb0">m mb0</div>
<div class="m ml0">m ml0</div>
<div class="m mx0">m mx0</div>
<div class="m my0">m my0</div>
m m0
m mt0
m mr0
m mb0
m ml0
m mx0
m my0
* Notes
Additional styles may be added to the example output (borders, spacing, colors) for demonstration.
For example extra borders, margins, and paddings have in added along with colors. This is what each color represents.
- Green = Padding
- Orange = Margins
- Red = Negative Margins
- Red Border = Cancelled Margins