diff --git a/build/loaders/md-renderer.js b/build/loaders/md-renderer.js
index 071043415..b34ab24f7 100644
--- a/build/loaders/md-renderer.js
+++ b/build/loaders/md-renderer.js
@@ -6,7 +6,7 @@ function createRenderer (wrapCodeWithCard = true) {
   const overrides = {
     table (header, body) {
       if (body) body = '<tbody class="n-table__tbody">' + body + '</tbody>'
-      return '<n-table single-column class="api-table">\n' +
+      return '<n-table single-column class="md-table">\n' +
         '<thead class="n-table__thead">\n' +
         header +
         '</thead>\n' +
@@ -32,7 +32,7 @@ function createRenderer (wrapCodeWithCard = true) {
         throw new Error(`MdRendererError: ${language} is not valid for code - ${code}`)
       }
       const highlighted = hljs.highlight(language, code).value
-      return `${wrapCodeWithCard ? '<n-card size="small" style="margin-bottom: 16px;">' : ''}<n-config-consumer abstract>
+      return `${wrapCodeWithCard ? '<n-card size="small" class="md-card">' : ''}<n-config-consumer abstract>
   <template v-slot="{ theme }">
     <pre class="n-code" :class="'n-' + theme + '-theme'"><code v-pre>${highlighted}</code><n-code style="display: none;" /></pre>
   </template>
diff --git a/demo/styles/demo.css b/demo/styles/demo.css
index cb987474a..41046aa0b 100644
--- a/demo/styles/demo.css
+++ b/demo/styles/demo.css
@@ -28,11 +28,19 @@ body {
   max-width: 680px;
 }
 
-.api-table .n-table__td:nth-child(1) {
+.md-table .n-table__td:nth-child(1) {
   font-size: 13px !important;
   font-family: v-mono, monospace;
 }
 
-.api-table .n-text.n-text--code {
+.md-table .n-text.n-text--code {
   font-size: 13px !important;
+}
+
+.md-card {
+  margin-bottom: 16px;
+}
+
+.md-table {
+  margin-bottom: 16px;
 }
\ No newline at end of file