Update for table

src/style/readme.md

@@ -134,4 +134,47 @@
 <br>
 <ul>
   <li><strong>.float-left</strong></li> <li><strong>.float-right</strong></li> 
-</ul>
+</ul>
+
+
+
+
+
+##  <span id="Spacing">Spacing</span>
+<br>
+
+<p>The helper classes apply <strong>margin</strong> or <strong>padding</strong> to an element ranging from <em>0 to 5</em>. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format <code>{property}{direction}-{size}</code>.</p>
+
+<p>The <strong>property</strong> applies the type of spacing:</p>
+
+<div ><ul>
+<li><code>m</code> - applies <code>margin</code></li>
+<li><code>p</code> - applies <code>padding</code></li>
+</ul>
+</div>
+
+<p>The <strong>direction</strong> designates the side the property applies to:</p>
+
+<div ><ul>
+<li><code>t</code> - applies the spacing for <code>*-top</code></li>
+<li><code>b</code> - applies the spacing for <code>*-bottom</code></li>
+<li><code>l</code> - applies the spacing for <code>*-left</code></li>
+<li><code>r</code> - applies the spacing for <code>*-right</code></li>
+<li><code>x</code> - applies the spacing for both <code>*-left</code> and <code>*-right</code></li>
+<li><code>y</code> - applies the spacing for both <code>*-top</code> and <code>*-bottom</code></li>
+<li><code>a</code> - applies the spacing for the property in all directions</li>
+</ul>
+</div>
+<p>The <strong>size</strong> controls the increment of the property:</p>
+
+
+Example:
+
+```html
+<template>
+  <div>
+    <span class="pl-3">Test</span><br>
+    <span  class="ml-5 "
+    >Test</span>
+  <div>
+</template>