diff --git a/examples/dev.html b/examples/dev.html
index ca0cb71dc..97574025f 100644
--- a/examples/dev.html
+++ b/examples/dev.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -8,12 +9,11 @@
   <body>
     <main></main>
     <script>
+      /* eslint-disable */
       // Dynamically creates the script and link tag and adds the current time
       // in ms as a query on the URL. This ensures the script and the link is
-      // always reloaded.
-      //
-      // Useful during debugging because we want to see changes to the
-      // JavaScript and CSS code immediately.
+      // always reloaded. Useful during debugging because we want to see changes
+      // to the JavaScript and CSS code immediately.
       var head = document.getElementsByTagName('head')[0]
       var script = document.createElement('script')
       var time = new Date().getTime()
diff --git a/examples/images/index.js b/examples/images/index.js
index f9143e443..1004cffd9 100644
--- a/examples/images/index.js
+++ b/examples/images/index.js
@@ -32,8 +32,9 @@ const schema = {
       const { node, isSelected } = props
       const src = node.data.get('src')
       const className = isSelected ? 'active' : null
+      const style = { display: 'block' }
       return (
-        <img src={src} className={className} {...props.attributes} />
+        <img src={src} className={className} style={style} {...props.attributes} />
       )
     },
     paragraph: (props) => {
diff --git a/examples/index.html b/examples/index.html
index 4d1a26cb1..a8fd1615f 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
diff --git a/package.json b/package.json
index 911fa207f..9a1d0998e 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "build": "yarn run build:packages",
     "build:examples": "yarn run build:examples:dev && yarn run build:examples:prod",
     "build:examples:dev": "browserify --debug --transform babelify ./examples/index.js > ./examples/build.dev.js",
-    "build:examples:prod": "NODE_ENV=production browserify --transform babelify ./examples/index.js > ./examples/build.prod.js",
+    "build:examples:prod": "NODE_ENV=production browserify --global-transform envify --global-transform uglifyify --transform babelify ./examples/index.js > ./examples/build.prod.js",
     "build:packages": "lerna run build",
     "clean": "lerna run clean && lerna clean",
     "gh-pages": "yarn run build && yarn run build:examples && gh-pages --dist ./examples",
diff --git a/packages/slate-react/src/components/void.js b/packages/slate-react/src/components/void.js
index 5445ecbff..3eece16df 100644
--- a/packages/slate-react/src/components/void.js
+++ b/packages/slate-react/src/components/void.js
@@ -124,8 +124,23 @@ class Void extends React.Component {
 
   render() {
     const { props } = this
-    const { children, node } = props
+    const { children, node, readOnly } = props
     const Tag = node.kind == 'block' ? 'div' : 'span'
+    let style
+
+    if (!readOnly && node.kind == 'block') {
+      style = {
+        display: 'block',
+        height: '0',
+        color: 'transparent'
+      }
+    }
+
+    if (!readOnly && node.kind == 'inline') {
+      style = {
+        color: 'transparent'
+      }
+    }
 
     this.debug('render', { props })
 
@@ -138,7 +153,9 @@ class Void extends React.Component {
         onDragEnter={this.onDragEnter}
         onDragStart={this.onDragStart}
       >
-        {this.renderSpacer()}
+        <Tag style={style}>
+          {this.renderText()}
+        </Tag>
         <Tag contentEditable={false}>
           {children}
         </Tag>
@@ -147,33 +164,19 @@ class Void extends React.Component {
   }
 
   /**
-   * Render a fake spacer text, which will catch the cursor when it the void
-   * node is navigated to with the arrow keys. Having this spacer there means
-   * the browser continues to manage the selection natively, so it keeps track
-   * of the right offset when moving across the block.
+   * Render the void node's text node, which will catch the cursor when it the
+   * void node is navigated to with the arrow keys.
+   *
+   * Having this text node there means the browser continues to manage the
+   * selection natively, so it keeps track of the right offset when moving
+   * across the block.
    *
    * @return {Element}
    */
 
-  renderSpacer = () => {
+  renderText = () => {
     const { block, decorations, isSelected, node, readOnly, schema, state, editor } = this.props
     const child = node.getFirstText()
-    let style
-
-    if (node.kind == 'block') {
-      style = {
-        display: 'inline-block',
-        verticalAlign: 'top',
-        width: '0',
-        height: '0',
-        color: 'transparent'
-      }
-    } else {
-      style = {
-        color: 'transparent'
-      }
-    }
-
     return (
       <Text
         block={node.kind == 'block' ? node : block}
@@ -186,7 +189,6 @@ class Void extends React.Component {
         readOnly={readOnly}
         schema={schema}
         state={state}
-        style={style}
       />
     )
   }
