Skip to main content

math-style

The math-style property indicates whether MathML equations should render with normal or compact height.

Syntax

/* Keyword values */
math-style: normal;
math-style: compact;

/* Global values */
math-style: inherit;
math-style: initial;
math-style: revert;
math-style: revert-layer;
math-style: unset;

Values

  • normal
    • : The initial value, indicates normal rendering.
  • compact
    • : The math layout on descendants tries to minimize the logical height.

Formal definition

Formal syntax

Examples

Changing the style of a formula to compact

CSS

math {
math-style: normal;
}
.compact {
math-style: compact;
}

HTML

<p>
Normal height
<math>
<mrow>
<munderover>
<mo></mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mo>+</mo>
<mn></mn>
</mrow>
</munderover>
</mrow>
</math>
and compact height
<math class="compact">
<mrow>
<munderover>
<mo></mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mo>+</mo>
<mn></mn>
</mrow>
</munderover>
</mrow>
</math>
equations.
</p>

Result

Specifications

Browser compatibility

See also

  • {{cssxref("math-depth")}}
  • {{cssxref("font-size")}}