Spacing and Borders
Spacing
Color Key:
Content Padding Margin Negative Margin
Padding
<div class="p">p</p>
<div class="pt">pt</p>
<div class="pr">pr</p>
<div class="pb">pb</p>
<div class="pl">pl</p>
<div class="px">px</p>
<div class="py">py</p>p
pt
pr
pb
pl
px
py
Zero Padding
<div class="p p0">p p0</p>
<div class="p pt0">p pt0</p>
<div class="p pr0">p pr0</p>
<div class="p pb0">p pb0</p>
<div class="p pl0">p pl0</p>
<div class="p px0">p px0</p>
<div class="p py0">p py0</p>p p0
p pt0
p pr0
p pb0
p pl0
p px0
p py0
Half Padding
<div class="ph">p</ph>
<div class="pth">pth</p>
<div class="prh">prh</p>
<div class="pbh">pbh</p>
<div class="plh">plh</p>
<div class="pxh">pxh</p>
<div class="pyh">pyh</p>ph
pth
prh
pbh
plh
pxh
pyh
Quarter Padding
<div class="pq">pq</p>
<div class="ptq">ptq</p>
<div class="prq">prq</p>
<div class="pbq">pbq</p>
<div class="plq">plq</p>
<div class="pxq">pxq</p>
<div class="pyq">pyq</p>pq
ptq
prq
pbq
plq
pxq
pyq
Margin
<div class="m">m</p>
<div class="mt">mt</p>
<div class="mr">mr</p>
<div class="mb">mb</p>
<div class="ml">ml</p>
<div class="mx">mx</p>
<div class="my">my</p>m
mt
mr
mb
ml
mx
my
Zero Margin
<div class="m p0">m m0</p>
<div class="m pt0">m mt0</p>
<div class="m pr0">m mr0</p>
<div class="m pb0">m mb0</p>
<div class="m pl0">m ml0</p>
<div class="m px0">m mx0</p>
<div class="m py0">m my0</p>m m0
m mt0
m mr0
m mb0
m ml0
m mx0
m my0
Negative Margin
<div class="-m">-m</p>
<div class="-mt">-mt</p>
<div class="-mr">-mr</p>
<div class="-mb">-mb</p>
<div class="-ml">-ml</p>
<div class="-mx">-mx</p>
<div class="-my">-my</p>-m
-mt
-mr
-mb
-ml
-mx
-my
Border
<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
Zero Border
<div class="b b0">b b0</div>
<div class="b bt0">b bt0</div>
<div class="b br0">b br0</div>
<div class="b bb0">b bb0</div>
<div class="b bl0">b bl0</div>
<div class="b bx0">b bx0</div>
<div class="b by0">b by0</div>b b0
b bt0
b br0
b bb0
b bl0
b bx0
b by0
Radius
<div class="r">r</div>
<div class="rtl">rtl</div>
<div class="rt">rt</div>
<div class="rtr">rtr</div>
<div class="rr">rr</div>
<div class="rbr">rbr</div>
<div class="rb">rb</div>
<div class="rbl">rbl</div>
<div class="rl">rl</div>r
rtl
rt
rtr
rr
rbr
rb
rbl
rl
Zero Radius
<div class="r r0">r r0</div>
<div class="r rtl0">r rtl0</div>
<div class="r rt0">r rt0</div>
<div class="r rtr0">r rtr0</div>
<div class="r rr0">r rr0</div>
<div class="r rbr0">r rbr0</div>
<div class="r rb0">r rb0</div>
<div class="r rbl0">r rbl0</div>
<div class="r rl0">r rl0</div>r r0
r rtl0
r rt0
r rtr0
r rr0
r rbr0
r rb0
r rbl0
r rl0