One strut instead of two (#1307)

* One strut instead of two

As suggested in https://github.com/Khan/KaTeX/pull/1287#discussion_r187485780
the two struts were redundant; the formerly "bottom" strut suffices to
implement both height and depth constraints.

* Update screenshots

src/buildHTML.js

@@ -641,20 +641,17 @@ function buildHTMLUnbreakable(children, options) {
     // Compute height and depth of this chunk.
     const body = makeSpan(["base"], children, options);
 
-    // Add struts, which ensure that the top of the HTML element falls at
+    // Add strut, which ensures that the top of the HTML element falls at
     // the height of the expression, and the bottom of the HTML element
     // falls at the depth of the expression.
-    const topStrut = makeSpan(["strut"]);
+    // We used to have separate top and bottom struts, where the bottom strut
-    const bottomStrut = makeSpan(["strut", "bottom"]);
+    // would like to use `vertical-align: top`, but in IE 9 this lowers the
-
+    // baseline of the box to the bottom of this strut (instead of staying in
-    topStrut.style.height = body.height + "em";
+    // the normal place) so we use an absolute value for vertical-align instead.
-    bottomStrut.style.height = (body.height + body.depth) + "em";
+    const strut = makeSpan(["strut"]);
-    // We'd like to use `vertical-align: top` but in IE 9 this lowers the
+    strut.style.height = (body.height + body.depth) + "em";
-    // baseline of the box to the bottom of this strut (instead staying in the
+    strut.style.verticalAlign = -body.depth + "em";
-    // normal place) so we use an absolute value for vertical-align instead
+    body.children.unshift(strut);
-    bottomStrut.style.verticalAlign = -body.depth + "em";
-
-    body.children.unshift(topStrut, bottomStrut);
 
     return body;
 }