diff --git a/src/sandbox/index.js b/src/sandbox/index.js
index f34c934..dcd5300 100644
--- a/src/sandbox/index.js
+++ b/src/sandbox/index.js
@@ -195,6 +195,12 @@ class Sandbox extends Component {
     }
   }
 
+  contentLoaded(ev) {
+    let elem = ev.target
+    let body = elem.contentWindow.document.body
+    elem.style.height = body.clientHeight + 'px'
+  }
+
   mounted() {
     //
     this.#cache.preview.panel = this.$refs.preview
@@ -228,7 +234,7 @@ class Sandbox extends Component {
         ></wc-icon>
       </header>
       <div class="content">
-        <iframe ref="preview"></iframe>
+        <iframe ref="preview" @load=${this.contentLoaded}></iframe>
         <slot name="javascript"></slot>
         <slot name="html"></slot>
         <slot name="css"></slot>
diff --git a/src/space/index.js b/src/space/index.js
index 22efad4..0e91287 100644
--- a/src/space/index.js
+++ b/src/space/index.js
@@ -8,6 +8,8 @@ import { css, html, Component } from '@bd/core'
 
 class Space extends Component {
   static styles = css`
+    @use 'sass:math';
+
     :host {
       display: block;
     }
@@ -16,7 +18,7 @@ class Space extends Component {
       flex-wrap: wrap;
       align-items: center;
       width: 100%;
-      padding: 12px 0;
+      padding: 6px 0;
       gap: 12px;
     }
     :host([vertical]) {
@@ -41,7 +43,7 @@ class Space extends Component {
     @loop $k, $v in $gaps {
       :host([gap='#{$k}']) {
         .container {
-          padding: $v 0;
+          padding: math.div($v, 2) 0;
           gap: $v;
         }
       }