Update spacing docs bugs.

Author: mrmrs

docs/layout/spacing/index.html

@@ -67,15 +67,15 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-spacing</h4>
           Spacing comes in two flavors. Depending on borders and background colors, the difference between padding and margin can be invisible to the naked eye of the user. But to a developer, they serve different roles. Most codebases lack a ratio based scale and instead are littered with values that are just magic numbers. This is bad.
         </p>
         <p class="measure f5 f4-ns lh-copy">
-          Good design, is based in math. Certain patterns and ratios are so prevelant in nature and music that they can't be denied as elegant design solutions. Even in the 18th century, pages in books were designed with ratios. In the 21st century, we have gotten away from this on the web, often times using magic numbers to match a 'spec' that has been produced in a graphics program such as photoshop, illustrator, or sketch. While these programs are useful for sketching ideas, they aren't reflective of how the web works across device sizes or how things get drawn to the screen.
+          Good design, is based in math. Certain patterns and ratios are so prevelant in nature and music that they can't be denied as elegant design solutions. Even in the 18th century, pages in fw4s were designed with ratios. In the 21st century, we have gotten away from this on the web, often times using magic numbers to match a 'spec' that has been produced in a graphics program such as photoshop, illustrator, or sketch. While these programs are useful for sketching ideas, they aren't reflective of how the web works across device sizes or how things get drawn to the screen.
         </p>
         <p class="measure f5 f4-ns lh-copy">
 Tachyons features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since tachyons uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time. As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. Computers aren't that great at math and so decimals lead to inconsistencies across platforms. Inconsistencies should be avoided where possible. You'll find that when using a well thought out scale - things just line up. It works, with little effort, regardless of your design knowledge or sensibilities.
         </p>
       </article>
 <div class="ph3 ph5-ns pt4 pb5">
   <h2 class="f3 bold">Examples</h2>
-  <h3 class="f5 book pt4 ttu tracked">Padding All</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Padding All</h3>
   <p>pa1, pa2, pa3, pa4, pa5, pa6, pa7</p>
   <div><div class="pan mb2 dib bg-black white">pan</div></div>
   <div><div class="pa1 mb2 dib bg-black white">pa1</div></div>
@@ -85,52 +85,52 @@ <h3 class="f5 book pt4 ttu tracked">Padding All</h3>
   <div><div class="pa5 mb2 dib bg-black white">pa5</div></div>
   <div><div class="pa6 mb2 dib bg-black white">pa6</div></div>
   <div><div class="pa7 mb2 dib bg-black white">pa7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Padding Horizontal</h3>
-  <div><div class="phn mb2 dib bg-black white">phn</div></div>
+  <h3 class="f5 fw4 pt4 ttu tracked">Padding Horizontal</h3>
+  <div><div class="ph0 mb2 dib bg-black white">ph0</div></div>
   <div><div class="ph1 mb2 dib bg-black white">ph1 </div></div>
   <div><div class="phs mb2 dib bg-black white"> phs</div></div>
   <div><div class="ph3 mb2 dib bg-black white"> ph3</div></div>
   <div><div class="ph4 mb2 dib bg-black white"> ph4</div></div>
   <div><div class="ph5 mb2 dib bg-black white"> ph5</div></div>
   <div><div class="ph6 mb2 dib bg-black white"> ph6</div></div>
   <div><div class="ph7 mb2 dib bg-black white"> ph7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Padding Vertical</h3>
-  <div><div class="pvn mb2 dib bg-black white">pvn</div></div>
+  <h3 class="f5 fw4 pt4 ttu tracked">Padding Vertical</h3>
+  <div><div class="pv0 mb2 dib bg-black white">pv0</div></div>
   <div><div class="pv1 mb2 dib bg-black white">pv1 </div></div>
-  <div><div class="pvs mb2 dib bg-black white"> pvs</div></div>
-  <div><div class="pvm mb2 dib bg-black white"> pvm</div></div>
+  <div><div class="pv2 mb2 dib bg-black white"> pv2</div></div>
+  <div><div class="pv3 mb2 dib bg-black white"> pv3</div></div>
   <div><div class="pv4 mb2 dib bg-black white"> pv4</div></div>
   <div><div class="pv5 mb2 dib bg-black white"> pv5</div></div>
   <div><div class="pv6 mb2 dib bg-black white"> pv6</div></div>
   <div><div class="pv7 mb2 dib bg-black white"> pv7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Padding Left</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Padding Left</h3>
   <div><div class="pl0 mb2 dib bg-black white">pl0</div></div>
   <div><div class="pl1 mb2 dib bg-black white">pl1 </div></div>
-  <div><div class="pls mb2 dib bg-black white"> pls</div></div>
-  <div><div class="plm mb2 dib bg-black white"> plm</div></div>
-  <div><div class="pll mb2 dib bg-black white"> pll</div></div>
+  <div><div class="pl2 mb2 dib bg-black white"> pl2</div></div>
+  <div><div class="pl3 mb2 dib bg-black white"> pl3</div></div>
+  <div><div class="pl4 mb2 dib bg-black white"> pl4</div></div>
   <div><div class="pl5 mb2 dib bg-black white"> pl5</div></div>
   <div><div class="pl6 mb2 dib bg-black white"> pl6</div></div>
   <div><div class="pl7 mb2 dib bg-black white"> pl7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Padding Right</h3>
-  <div><div class="prn mb2 dib bg-black white">prn</div></div>
+  <h3 class="f5 fw4 pt4 ttu tracked">Padding Right</h3>
+  <div><div class="pr0 mb2 dib bg-black white">pr0</div></div>
   <div><div class="pr1 mb2 dib bg-black white">pr1 </div></div>
   <div><div class="pr2 mb2 dib bg-black white"> pr2</div></div>
   <div><div class="pr3 mb2 dib bg-black white"> pr3</div></div>
   <div><div class="pr4 mb2 dib bg-black white"> pr4</div></div>
   <div><div class="pr5 mb2 dib bg-black white"> pr5</div></div>
   <div><div class="pr6 mb2 dib bg-black white"> pr6</div></div>
   <div><div class="pr7 mb2 dib bg-black white"> pr7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Padding Top</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Padding Top</h3>
   <div><div class="pt0 mb2 dib bg-black white">pt0</div></div>
   <div><div class="pt1 mb2 dib bg-black white">pt1 </div></div>
-  <div><div class="pts mb2 dib bg-black white"> pts</div></div>
+  <div><div class="pt2 mb2 dib bg-black white"> pt2</div></div>
   <div><div class="pt3 mb2 dib bg-black white"> pt3</div></div>
   <div><div class="pt4 mb2 dib bg-black white"> pt4</div></div>
   <div><div class="pt5 mb2 dib bg-black white"> pt5</div></div>
   <div><div class="pt6 mb2 dib bg-black white"> pt6</div></div>
   <div><div class="pt7 mb2 dib bg-black white"> pt7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Padding Bottom</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Padding Bottom</h3>
   <div><div class="pt0 mb2 dib bg-black white">pt0</div></div>
   <div><div class="pb1 mb2 dib bg-black white">pb1 </div></div>
   <div><div class="pb2 mb2 dib bg-black white"> pb2</div></div>
@@ -140,17 +140,17 @@ <h3 class="f5 book pt4 ttu tracked">Padding Bottom</h3>
   <div><div class="pb6 mb2 dib bg-black white"> pb6</div></div>
   <div><div class="pb7 mb2 dib bg-black white"> pb7</div></div>
 <section>
-  <h3 class="f5 book pt4 ttu tracked">Margin All</h3>
-  <p>ma1, mas, ma3, ma4, ma5, ma6, ma7</p>
+  <h3 class="f5 fw4 pt4 ttu tracked">Margin All</h3>
+  <p>ma1, ma2, ma3, ma4, ma5, ma6, ma7</p>
   <div class="bg-black-10"><div class="ma0 dib bg-black white">ma0</div></div>
   <div class="bg-black-20"><div class="ma1 dib bg-black white">ma1</div></div>
-  <div class="bg-black-30"><div class="mas dib bg-black white">mas</div></div>
+  <div class="bg-black-30"><div class="ma2 dib bg-black white">ma2</div></div>
   <div class="bg-black-40"><div class="ma3 dib bg-black white">ma3</div></div>
   <div class="bg-black-50"><div class="ma4 dib bg-black white">ma4</div></div>
   <div class="bg-black-60"><div class="ma5 dib bg-black white">ma5</div></div>
   <div class="bg-black-70"><div class="ma6 dib bg-black white">ma6</div></div>
   <div class="bg-black-80"><div class="ma7 dib bg-black white">ma7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Margin Horizontal</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Margin Horizontal</h3>
   <div class="bg-black-10"><div class="mh0 dib bg-black white">mh0</div></div>
   <div class="bg-black-20"><div class="mh1 dib bg-black white">mh1 </div></div>
   <div class="bg-black-30"><div class="mh2 dib bg-black white"> mh2</div></div>
@@ -159,7 +159,7 @@ <h3 class="f5 book pt4 ttu tracked">Margin Horizontal</h3>
   <div class="bg-black-60"><div class="mh5 dib bg-black white"> mh5</div></div>
   <div class="bg-black-70"><div class="mh6 dib bg-black white"> mh6</div></div>
   <div class="bg-black-80"><div class="mh7 dib bg-black white"> mh7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Margin Vertical</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Margin Vertical</h3>
   <div class="bg-black-10"><div class="mv0 dib bg-black white">mv0</div></div>
   <div class="bg-black-20"><div class="mv1 dib bg-black white">mv1 </div></div>
   <div class="bg-black-30"><div class="mv2 dib bg-black white"> mv2</div></div>
@@ -168,25 +168,25 @@ <h3 class="f5 book pt4 ttu tracked">Margin Vertical</h3>
   <div class="bg-black-60"><div class="mv5 dib bg-black white"> mv5</div></div>
   <div class="bg-black-70"><div class="mv6 dib bg-black white"> mv6</div></div>
   <div class="bg-black-80"><div class="mv7 dib bg-black white"> mv7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Margin Left</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Margin Left</h3>
   <div class="bg-black-10"><div class="ml0 dib bg-black white">ml0</div></div>
   <div class="bg-black-20"><div class="ml1 dib bg-black white">ml1 </div></div>
-  <div class="bg-black-30"><div class="ml2 dib bg-black white"> mls</div></div>
+  <div class="bg-black-30"><div class="ml2 dib bg-black white"> ml2</div></div>
   <div class="bg-black-40"><div class="ml3 dib bg-black white"> ml3</div></div>
   <div class="bg-black-50"><div class="ml4 dib bg-black white"> ml4</div></div>
   <div class="bg-black-60"><div class="ml5 dib bg-black white"> ml5</div></div>
   <div class="bg-black-70"><div class="ml6 dib bg-black white"> ml6</div></div>
   <div class="bg-black-80"><div class="ml7 dib bg-black white"> ml7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Margin Right</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Margin Right</h3>
   <div class="bg-black-10"><div class="mr0 dib bg-black white">mr0</div><div class="dib pa2 bg-black"></div></div>
   <div class="bg-black-20"><div class="mr1 dib bg-black white">mr1 </div><div class="dib pa2 bg-black"></div></div>
-  <div class="bg-black-30"><div class="mrs dib bg-black white"> mrs</div><div class="dib pa2 bg-black"></div></div>
+  <div class="bg-black-30"><div class="mr2 dib bg-black white"> mr2</div><div class="dib pa2 bg-black"></div></div>
   <div class="bg-black-40"><div class="mr3 dib bg-black white"> mr3</div><div class="dib pa2 bg-black"></div></div>
   <div class="bg-black-50"><div class="mr4 dib bg-black white"> mr4</div><div class="dib pa2 bg-black"></div></div>
   <div class="bg-black-60"><div class="mr5 dib bg-black white"> mr5</div><div class="dib pa2 bg-black"></div></div>
   <div class="bg-black-70"><div class="mr6 dib bg-black white"> mr6</div><div class="dib pa2 bg-black"></div></div>
   <div class="bg-black-80"><div class="mr7 dib bg-black white"> mr7</div><div class="dib pa2 bg-black"></div></div>
-  <h3 class="f5 book pt4 ttu tracked">Margin Top</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Margin Top</h3>
   <div class="bg-black-10"><div class="mt0 dib bg-black white">mt0</div></div>
   <div class="bg-black-20"><div class="mt1 dib bg-black white">mt1 </div></div>
   <div class="bg-black-30"><div class="mt2 dib bg-black white"> mt2</div></div>
@@ -195,7 +195,7 @@ <h3 class="f5 book pt4 ttu tracked">Margin Top</h3>
   <div class="bg-black-60"><div class="mt5 dib bg-black white"> mt5</div></div>
   <div class="bg-black-70"><div class="mt6 dib bg-black white"> mt6</div></div>
   <div class="bg-black-80"><div class="mt7 dib bg-black white"> mt7</div></div>
-  <h3 class="f5 book pt4 ttu tracked">Margin Bottom</h3>
+  <h3 class="f5 fw4 pt4 ttu tracked">Margin Bottom</h3>
   <div class="bg-black-10"><div class="mb0 dib bg-black white">mb0</div></div>
   <div class="bg-black-20"><div class="mb1 dib bg-black white">mb1 </div></div>
   <div class="bg-black-30"><div class="mb2 dib bg-black white"> mb2</div></div>