diff --git a/lib/builders/Chip.js b/lib/builders/Chip.js
index 83d2f7a9..908ab219 100644
--- a/lib/builders/Chip.js
+++ b/lib/builders/Chip.js
@@ -1,4 +1,5 @@
 const ComponentBuilder = require('./../utils/Component-builder')
+const applySpacing = require('./../utils/apply-spacing')
 const { COLORS, TEXT_WHITE } = require('./../utils/color-reference')
 
 module.exports = function (definition, options) {
@@ -14,12 +15,21 @@ module.exports = function (definition, options) {
 function chipBuilder (builder, definition) {
   const {
     icon,
-    text
+    text,
+    spacing
   } = definition
 
-  const chip = builder
-    .addTag('q-chip')
-    .addAttribute('class', 'q-mt-md q-mr-sm q-mb-none q-ml-none')
+  const span = builder.addTag('span')
+  const chip = span.addChildTag('q-chip')
+
+  const classes = [
+    'q-mr-sm',
+    'q-ml-none'
+  ]
+
+  applySpacing({ source: span, spacing, classes })
+
+  // span.addAttribute('class', classes.join(' '))
 
   if (icon) {
     chip.addAttribute('icon', icon)
@@ -41,13 +51,23 @@ function chipBuilder (builder, definition) {
 function badgeBuilder (builder, definition) {
   const {
     icon,
-    text
+    text,
+    spacing
   } = definition
 
-  const badge = builder
-    .addTag('q-badge')
-    .addAttribute('class', 'q-mt-md q-mr-sm q-mb-none q-ml-none')
-    .addAttribute('multi-line', null)
+  const span = builder.addTag('span')
+  const badge = span.addChildTag('q-badge')
+
+  const classes = [
+    'q-mr-sm',
+    'q-ml-none'
+  ]
+
+  applySpacing({ source: span, spacing, classes })
+
+  // span.addAttribute('class', classes.join(' '))
+
+  badge.addAttribute('multi-line', null)
 
   if (icon) {
     badge