feat(docs): add spacings in code examples

Author: carwack

content/2.styled-system/1.style-props.md

@@ -24,7 +24,7 @@ each group.
 
   <!-- You can also make use of custom values -->
   <c-box max-w="960px" mx="auto">Custom</c-box>
-
+  
   <!-- sets margin `8px` on all viewports and `12px` from the first breakpoint and up -->
   <c-box :m="['2', '3']" />
 </template>
@@ -60,10 +60,10 @@ each group.
 <template>
   <!-- picks up a nested color value using dot notation -->
   <c-box color="gray.50" />
-
+  
   <!-- You can also use raw CSS color values -->
   <c-box color="#f00" />
-
+  
   <!-- Sets background color to pink -->
   <c-box bg="pink" />
 </template>
@@ -82,10 +82,10 @@ each group.
 <template>
   <!-- adding linear gradient and color transitions -->
   <c-box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />
-
+  
   <!-- adding radial gradient and color transitions -->
   <c-box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />
-
+  
   <!-- adding the text gradient -->
   <c-text
     bgGradient="linear(to-l, #7928CA, #FF0080)"
@@ -109,13 +109,13 @@ each group.
 <template>
   <!-- font-size of `theme.fontSizes.md` -->
   <c-text font-size="md" />
-
+  
   <!-- font-size `32px` -->
   <c-text font-size="32" />
-
+  
   <!-- font-size `'2em'` -->
   <c-text font-size="2em" />
-
+  
   <!-- text-align `left` on all viewports and `center` from the first breakpoint and up -->
   <c-text :text-align="[ 'left', 'center' ]" />
 </template>
@@ -145,7 +145,7 @@ each group.
 
   <!-- width `256px` -->
   <c-box w="256" />
-
+  
   <!-- width `'40px'` -->
   <c-box w="40px" />
 </template>
@@ -171,16 +171,16 @@ each group.
 <template>
   <!-- hide the element on all viewports -->
   <c-box display='none' />
-
+  
   <!-- hide the element by default, and show from 'md' up -->
   <c-box :display="{ base: 'none', md: 'block' }" />
-
+  
   <!-- shorthand -->
   <c-box hide-below='md' />
-
+  
   <!-- hide the element from 'md' up -->
   <c-box :display="{ base: 'block', md: 'none' }" />
-
+  
   <!-- shorthand -->
   <c-box hide-from='md' />
 </template>
@@ -237,7 +237,7 @@ each group.
   <c-box display="grid" grid-gap="2" grid-auto-flow="row dense">
     Grid
   </c-box>
-
+  
   <!-- shorthand using the `Grid` component -->
   <c-grid gap="2" auto-flow="row dense">
     Grid
@@ -272,7 +272,7 @@ each group.
     background-position="center"
     background-repeat="no-repeat"
   >
-
+  
   <!-- shorthand -->
   <c-box bg-image="url('/images/gaara.png')" bg-pos="center" bg-repeat="no-repeat" >
 </template>
@@ -369,14 +369,14 @@ each group.
 <template>
   <!-- verbose -->
   <c-box position="absolute">Cover</c-box>
-
+  
   <!-- shorthand -->
   <c-box pos="absolute">Cover</c-box>
-
+  
   <c-box pos="absolute" top="0" left="0">
     Absolute with top and left
   </c-box>
-
+  
   <c-box pos="fixed" w="100%" zIndex="2">
     Fixed with zIndex
   </c-box>
@@ -400,7 +400,7 @@ each group.
   <!-- text-shadow will be `theme.shadows.sm` -->
   <!-- box-shadow will be `theme.shadows.md` -->
   <c-box text-shadow="sm" box-shadow="md" />
-
+  
   <!-- raw CSS values -->
   <c-text text-shadow="2px 2px #ff0000" box-shadow="5px 10px #888888">
     Text with shadows