math-depth CSS property
Baseline
2026
Newly available
Since March 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The math-depth property describes a notion of depth for each element of a mathematical formula, with respect to the top-level container of that formula. This is used to scale the computed value of the font-size of elements when font-size: math is applied.
Note:
font-size: math is the default for <math> elements in the MathML Core User Agent stylesheet, so it's not necessary to specify it explicitly.
Syntax
/* Keyword values */
math-depth: auto-add;
/* Relative values */
math-depth: add(2);
math-depth: add(-2);
/* Absolute value */
math-depth: 4;
/* Global values */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;
Values
auto-add-
Set to the inherited
math-depthplus 1 when inherited math-style iscompact. add(<integer>)-
Set to the inherited
math-depthplus the specified integer. <integer>-
Set to the specified integer.
Formal definition
| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
math-depth =
auto-add |
add( <integer> ) |
<integer>
<integer> =
<number-token>
Examples
Specifying a math depth
The following example shows the effect of changing the math-depth property on the font size of subformulas.
The numbers in each subformula indicate the math-depth and scale factor applied.
The first <mtext> element is used as a reference to other subformulas and has no specific styles applied.
The second and third subformulas have math-depth set to auto-add and show the effect of scaling depending on the math-style.
The last two subformulas show the effect of setting math-depth to a specific value.
HTML
<p>
<math>
<mtext>0</mtext>
<!-- auto-add value has no effect when math-style is normal -->
<mrow style="math-style: normal">
<mrow style="math-depth: auto-add">
<mtext>0</mtext>
</mrow>
</mrow>
<!-- the inherited math-style is compact, so math-depth is set to 1 -->
<mrow style="math-depth: auto-add">
<mtext>1</mtext>
</mrow>
<mrow style="math-depth: add(2)">
<mtext>2</mtext>
<mrow style="math-depth: add(-1)">
<mtext>1</mtext>
</mrow>
<mrow style="math-depth: 0">
<mtext>0</mtext>
</mrow>
</mrow>
</math>
</p>
Result
Specifications
| Specification |
|---|
| MathML Core # the-math-script-level-property |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
math-depth
|
|
|
|
|
|
|
|
|
|
|
|
|
auto-add
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support