# MathML Demo: <mspace> - space

## MathML Demo: <mspace> - space

The background color of `<mspace>` elements has been set to yellow for easier viewing. You can set the width $\sum _{x\phantom{\rule{2em}{0.1ex}}y}$ height $∫ x y$ and depth $\left[x\phantom{\rule[-4ex]{0.1em}{0ex}}y\right]$ 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>
[/itex]
</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");
}

```

Tags: