diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index cbb8b63f6..9f1583feb 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -153,6 +153,10 @@
                             text-decoration: underline;
                         }
                     }
+
+                    li {
+                        line-height: 1.5;
+                    }
                 }
             }
         }
diff --git a/src/views/spacing/SpacingDemo.vue b/src/views/spacing/SpacingDemo.vue
index a6eacfd24..a8eaa9714 100644
--- a/src/views/spacing/SpacingDemo.vue
+++ b/src/views/spacing/SpacingDemo.vue
@@ -8,56 +8,64 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-6">
-                    <div class="card">
-                        <h5>Use Case 1</h5>
-                        <p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap
-                            they are displayed on top of each other whereas with spacing this issue can easily be resolved.
-                        </p>
+            <div class="card">
+                <h5>Margin</h5>
+                <h6>Without Spacing</h6>
+                <Button type="button" label="Button 1" style="width:20rem" />
+                <Button type="button" label="Button 2" style="width:20rem" />
 
-                        <h6>Without Spacing</h6>
-                        <Button type="button" label="Button 1" style="width:250px" />
-                        <Button type="button" label="Button 2" style="width:250px" />
+                <h6>With Spacing</h6>
+                <Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
+                <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
 
-                        <h6>With Spacing</h6>
-                        <Button type="button" label="Button 1" style="width:250px" class="p-mr-2 p-mb-2" />
-                        <Button type="button" label="Button 2" style="width:250px" class="p-mr-2"/>
+                <h5>Responsive Margin</h5>
+                <h6>Without Spacing</h6>
+                <div class="p-grid p-formgrid p-fluid">
+                    <div class="p-col-12 p-lg-4">
+                        <InputText />
+                    </div>
+                    <div class="p-col-12 p-lg-4">
+                        <InputText />
+                    </div>
+                    <div class="p-col-12 p-lg-4">
+                        <InputText />
                     </div>
                 </div>
-                <div class="p-col-12 p-md-6">
-                    <div class="card">
-                        <h5>Use Case 2</h5>
-                        <p>Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves
-                            separately in stacked mode, reduce the dimension of the window to view the difference.
-                        </p>
 
-                        <h6>Without Spacing</h6>
-                        <div class="p-grid p-formgrid p-fluid">
-                            <div class="p-col-12 p-lg-4">
-                                <InputText />
-                            </div>
-                            <div class="p-col-12 p-lg-4">
-                                <InputText />
-                            </div>
-                            <div class="p-col-12 p-lg-4">
-                                <InputText />
-                            </div>
-                        </div>
-
-                        <h6>With Spacing</h6>
-                        <div class="p-grid p-formgrid p-fluid">
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
-                                <InputText />
-                            </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
-                                <InputText />
-                            </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
-                                <InputText />
-                            </div>
-                        </div>
+                <h6>With Spacing</h6>
+                <div class="p-grid p-formgrid p-fluid">
+                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <InputText />
                     </div>
+                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <InputText />
+                    </div>
+                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <InputText />
+                    </div>
+                </div>
+
+                <h6>Center</h6>
+                <div class="demo-container p-p-4">
+                    <Button type="button" label="Button" class="p-d-block p-mx-auto" />
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Padding</h5>
+                <h6>Without Spacing</h6>
+                <div class="demo-container">
+                    <Button type="button" label="Button" />
+                </div>
+
+                <h6>With Spacing</h6>
+                <div class="demo-container p-p-3">
+                    <Button type="button" label="Button" />
+                </div>
+
+                <h6>Responsive Spacing</h6>
+                <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+                    <Button type="button" label="Button" />
                 </div>
             </div>
         </div>
@@ -77,7 +85,7 @@ export default {
 </script>
 
 <style scoped>
-    .card {
-        min-height: 100%;
-    }
+.demo-container {
+    border: 1px solid var(--surface-d);
+}
 </style>
\ No newline at end of file
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 14e5e6c4a..490d0aa73 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -3,16 +3,18 @@
 		<TabView>
 			<TabPanel header="Documentation">
                 <h5>Getting Started</h5>
-                <p>The classes modify the margins and use the <i>p-m{position}-{value}</i> syntax whereas for responsive
-                values <i>p-m{position}-{breakpoint}-{value}</i> format is used.</p>
-<CodeHighlight>
-&lt;div class="p-mb-2"&gt;&lt;/i&gt;
-&lt;div class="p-mt-4"&gt;&lt;/i&gt;
-&lt;div class="p-m-1 p-m-lg-2"&gt;&lt;/i&gt;
-</CodeHighlight>
+                <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
+                values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
+
+                <h5>Property</h5>
+                <p>Property can either be a margin or a padding.</p>
+                <ul>
+                    <li><b>m</b>: margin</li>
+                    <li><b>p</b>: padding</li>
+                </ul>
 
                 <h5>Position</h5>
-                <p>Position can either be either of the 4 sides, the x-y axis or blank for the shortand of all sides.</p>
+                <p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p>
                 <ul>
                     <li><b>t</b>: top</li>
                     <li><b>b</b>: bottom</li>
@@ -24,7 +26,7 @@
                 </ul>
 
                 <h5>Value</h5>
-                <p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special auto value is used to center elements using auto margins.</p>
+                <p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p>
                 <ul>
                     <li><b>0</b>: $spacer * 0</li>
                     <li><b>1</b>: $spacer * .25</li>
@@ -45,6 +47,17 @@
                     <li><b>xl</b>: larger screens .e.g monitors</li>
                 </ul>
 
+                <h5>Examples</h5>
+<CodeHighlight>
+&lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/i&gt;    
+&lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/i&gt;
+&lt;div class="p-m-2"&gt;Margin for all sides with level 2&lt;/i&gt;
+&lt;div class="p-mx-auto"&gt;Auto margins for left and right side&lt;/i&gt;
+&lt;div class="p-pb-4"&gt;Padding bottom with level 4&lt;/i&gt;
+&lt;div class="p-p-1"&gt;Padding for all sides with level 1&lt;/i&gt;
+&lt;div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3"&gt;Level 3 spacing for lg screens and level 1 for smaller screens (xs).&lt;/i&gt;
+</CodeHighlight>
+
 				<h5>Dependencies</h5>
 				<p>PrimeFlex.</p>
 			</TabPanel>
@@ -55,7 +68,65 @@
 				</a>
 <CodeHighlight>
 <template v-pre>
+&lt;div class="card"&gt;
+    &lt;h5&gt;Margin&lt;/h5&gt;
+    &lt;h6&gt;Without Spacing&lt;/h6&gt;
+    &lt;Button type="button" label="Button 1" style="width:20rem" /&gt;
+    &lt;Button type="button" label="Button 2" style="width:20rem" /&gt;
 
+    &lt;h6&gt;With Spacing&lt;/h6&gt;
+    &lt;Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" /&gt;
+    &lt;Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/&gt;
+
+    &lt;h5&gt;Responsive Margin&lt;/h5&gt;
+    &lt;h6&gt;Without Spacing&lt;/h6&gt;
+    &lt;div class="p-grid p-formgrid p-fluid"&gt;
+        &lt;div class="p-col-12 p-lg-4"&gt;
+            &lt;InputText /&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col-12 p-lg-4"&gt;
+            &lt;InputText /&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col-12 p-lg-4"&gt;
+            &lt;InputText /&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;h6&gt;With Spacing&lt;/h6&gt;
+    &lt;div class="p-grid p-formgrid p-fluid"&gt;
+        &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
+            &lt;InputText /&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
+            &lt;InputText /&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
+            &lt;InputText /&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="demo-container p-p-4"&gt;
+        &lt;Button type="button" label="Button" class="p-d-block p-mx-auto" /&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+    &lt;h5&gt;Padding&lt;/h5&gt;
+    &lt;h6&gt;Without Spacing&lt;/h6&gt;
+    &lt;div class="demo-container"&gt;
+        &lt;Button type="button" label="Button" /&gt;
+    &lt;/div&gt;
+
+    &lt;h6&gt;With Spacing&lt;/h6&gt;
+    &lt;div class="demo-container p-p-3"&gt;
+        &lt;Button type="button" label="Button" /&gt;
+    &lt;/div&gt;
+
+    &lt;h6&gt;Responsive Spacing&lt;/h6&gt;
+    &lt;div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3"&gt;
+        &lt;Button type="button" label="Button" /&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>
 			</TabPanel>