MathML Demo: <mspace> - space

The background color of <mspace> elements has been set to yellow for easier viewing. You can set the width ∑ x y height ∫ x y and depth [ x y ] of mspace elements (click the math text to view the numeric values that are set).

Interactive Sizing

HTML Content

<p>
Use the control buttons below to adjust the parameters of
the <code>mspace</code> element and see the effects. <br />
Height
<a class="control" href="javascript:upheight();" title="increase height">+</a>/
<a class="control" href="javascript:downheight();" title="decrease height">-</a>
Width
<a class="control" href="javascript:upwidth();" title="increase width">+</a>/
<a class="control" href="javascript:downwidth();" title="decrease width">-</a>
Depth
<a class="control" href="javascript:updepth();" title="increase depth">+</a>/
<a class="control" href="javascript:downdepth();" title="decrease depth">-</a>

  <math display="block">
<mstyle displaystyle="true">
<msqrt>
<mrow>
<mn>3</mn>
<mspace style="background-color: yellow" id="thespace" height="0.1ex" depth="0.1ex" width="0.1em" />
<mi>x</mi>
</mrow>
</msqrt>
</mstyle>
</math>
</p>

JavaScript Content

var height=0;
var width=0;
var depth=0;
function upheight() {
  height++;
  document.getElementById("thespace").setAttribute("height",height+".1ex");
}
function downheight() {
  height--;
  document.getElementById("thespace").setAttribute("height",height+".1ex");
}
function upwidth() {
  width++;
  document.getElementById("thespace").setAttribute("width",width+".1em");
}
function downwidth() {
  width--;
  document.getElementById("thespace").setAttribute("width",width+".1em");
}
function updepth() {
  depth++;
  document.getElementById("thespace").setAttribute("depth",depth+".1ex");
}
function downdepth() {
  depth--;
  document.getElementById("thespace").setAttribute("depth",depth+".1ex");
}