diff --git a/assets/javascripts/initializers/discourse-math-katex.js.es6 b/assets/javascripts/initializers/discourse-math-katex.js.es6
index 038b311..a31fa86 100644
--- a/assets/javascripts/initializers/discourse-math-katex.js.es6
+++ b/assets/javascripts/initializers/discourse-math-katex.js.es6
@@ -21,8 +21,10 @@ function decorate(elem) {
   $elem.data("applied-katex", true);
 
   if ($elem.hasClass("math")) {
+    const tag = elem.tagName === "DIV" ? "div" : "span";
+    const displayClass = tag === "div" ? "block-math" : "inline-math";
     const text = $elem.text();
-    $elem.addClass("math-container").text("");
+    $elem.addClass(`math-container ${displayClass} katex-math`).text("");
     window.katex.render(text, elem, { displayMode });
   }
 }
diff --git a/assets/javascripts/initializers/discourse-math-mathjax.js.es6 b/assets/javascripts/initializers/discourse-math-mathjax.js.es6
index 6f9dd8e..f978c43 100644
--- a/assets/javascripts/initializers/discourse-math-mathjax.js.es6
+++ b/assets/javascripts/initializers/discourse-math-mathjax.js.es6
@@ -48,16 +48,30 @@ function decorate(elem, isPreview) {
   if ($elem.hasClass("math")) {
     const tag = elem.tagName === "DIV" ? "div" : "span";
     const display = tag === "div" ? "; mode=display" : "";
+    const displayClass = tag === "div" ? "block-math" : "inline-math";
+    const type = `math/tex${display}`;
+    const classList = `math-container ${displayClass} mathjax-math`;
+
     $mathWrapper = $(
-      `<${tag} class="math-container" style="display: none;"><script type="math/tex${display}"></script></${tag}>`
+      `<${tag} class="${classList}" style="display: none;">
+         <script type="${type}"></script>
+       </${tag}>`
     );
+
     $math = $mathWrapper.children();
     $math.text($elem.text());
     $elem.after($mathWrapper);
   } else if ($elem.hasClass("asciimath")) {
+    // asciimath is always inline
+    const classList = `math-container inline-math ascii-math`;
+    const type = `math/asciimath`;
+
     $mathWrapper = $(
-      `<span class="math-container" style="display: none;"><script type="math/asciimath"></script></span>`
+      `<span class="${classList}" style="display: none;">
+         <script type="${type}"></script>
+       </span>`
     );
+
     $math = $mathWrapper.children();
     $math.text($elem.text());
     $elem.after($mathWrapper);
diff --git a/assets/stylesheets/common/discourse-math.scss b/assets/stylesheets/common/discourse-math.scss
index 8ddf500..1a9a0e2 100644
--- a/assets/stylesheets/common/discourse-math.scss
+++ b/assets/stylesheets/common/discourse-math.scss
@@ -1,58 +1,77 @@
 .math-container {
-  display: block;
+  &.block-math,
+  &.ascii-math {
+    display: block;
 
-  > div:nth-child(2),
-  > span:nth-child(2),
-  > .katex-display {
-    // Mathjax ships with !important inline;
-    display: block !important;
-    max-width: 100%;
-    margin-bottom: 1em;
+    // we use tag selectors because MathJax does not provide helpfull classes
+    // and the possible combinations a bit absurd. The styles are scoped by the
+    // parent selector. So they don't affect any other elements.
+    > {
+      div,
+      span {
+        // Mathjax ships with !important inline;
+        display: block !important;
+        max-width: 100%;
+        margin-bottom: 1em;
 
-    // Inner containers for all renderers
-    > :first-child:not(.katex),
-    .katex-html {
-      display: block;
-      overflow: auto hidden;
-      max-width: 100%;
-      padding: 0.25em 0.5em;
-      box-sizing: border-box;
-    }
-  }
-
-  // On mobile we add a slight fade on either side to indicate that the user can
-  // scroll. However, this should not be added to the composer since mathjax does
-  // not render in the mobile composer
-  .cooked & {
-    .mobile-view & {
-      position: relative;
-      &:before {
-        content: "";
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        top: 0;
-        width: 1em;
-        height: 100%;
-        background: linear-gradient(
-          to right,
-          rgba($secondary, 1) 0%,
-          rgba($secondary, 0) 100%
-        );
+        // Inner containers for all renderers
+        // mathjax generic
+        [id*="-Frame"],
+        > nobr,
+        > span,
+        // special handeling for SVG
+        &.MathJax_SVG,
+        // special handeling for katex
+        .katex-html {
+          display: block;
+          overflow: auto hidden;
+          max-width: 100%;
+          padding: 0.25em 0.5em;
+          box-sizing: border-box;
+        }
       }
-      &:after {
-        content: "";
-        position: absolute;
-        z-index: 1;
-        right: 0;
-        top: 0;
-        width: 1em;
-        height: 100%;
-        background: linear-gradient(
-          to right,
-          rgba($secondary, 0) 0%,
-          rgba($secondary, 1) 100%
-        );
+    }
+
+    // On mobile we add a slight fade on either side to indicate that the user can
+    // scroll. However, this should not be added to the composer since mathjax does
+    // not render in the mobile composer
+    .cooked & {
+      .mobile-view & {
+        position: relative;
+
+        &:before {
+          content: "";
+          position: absolute;
+          z-index: 1;
+          left: 0;
+          top: 0;
+          width: 1em;
+          height: 100%;
+          background: linear-gradient(
+            to right,
+            rgba($secondary, 1) 0%,
+            rgba($secondary, 0) 100%
+          );
+        }
+        &:after {
+          content: "";
+          position: absolute;
+          z-index: 1;
+          right: 0;
+          top: 0;
+          width: 1em;
+          height: 100%;
+          background: linear-gradient(
+            to right,
+            rgba($secondary, 0) 0%,
+            rgba($secondary, 1) 100%
+          );
+        }
+
+        .MJXp-mtable,
+        .MJXp-mstyle {
+          padding: 0 0.75em;
+        }
       }
     }
   }