diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
index 2b6a2ce33edab..ea1d0153fdfef 100644
--- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -4,7 +4,7 @@ exports[`it handles goofy nesting properly 1`] = `
 "
   <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; ; max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -28,7 +28,7 @@ exports[`it leaves images that are already linked alone 1`] = `
 "
   <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; ; max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -51,7 +51,7 @@ exports[`it leaves images that are already linked alone 1`] = `
 exports[`it leaves linked HTML img tags alone 1`] = `
 "<a href=\\"https://example.org\\">
   
-  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; ; max-width: 300px; margin-left: auto; margin-right: auto;\\">
+  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;url(&apos;data:image/png;base64, iVBORw)&apos;); background-size: cover; display: block;\\">
       <img class=\\"gatsby-resp-image-image\\" style=\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
     </span>
@@ -62,7 +62,7 @@ exports[`it leaves linked HTML img tags alone 1`] = `
 
 exports[`it leaves single-line linked HTML img tags alone 1`] = `
 "
-  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; ; max-width: 300px; margin-left: auto; margin-right: auto;\\">
+  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;url(&apos;data:image/png;base64, iVBORw)&apos;); background-size: cover; display: block;\\">
       <img class=\\"gatsby-resp-image-image\\" style=\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
     </span>
@@ -74,7 +74,7 @@ exports[`it transforms HTML img tags 1`] = `
 "
   <a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
   
-  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; ; max-width: 300px; margin-left: auto; margin-right: auto;\\">
+  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;url(&apos;data:image/png;base64, iVBORw)&apos;); background-size: cover; display: block;\\">
       <img class=\\"gatsby-resp-image-image\\" style=\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
     </span>
@@ -96,7 +96,7 @@ exports[`it transforms images in markdown 1`] = `
   
   <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block; ; max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index 0588df8b6f0a5..e4360ce60abd5 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -173,8 +173,8 @@ module.exports = (
   <span
     class="gatsby-resp-image-wrapper"
     style="position: relative; display: block; ${
-      showCaptions ? null : options.wrapperStyle
-    }; max-width: ${presentationWidth}px; margin-left: auto; margin-right: auto;"
+      showCaptions ? `` : options.wrapperStyle
+    } max-width: ${presentationWidth}px; margin-left: auto; margin-right: auto;"
   >
     <span
       class="gatsby-resp-image-background-image"