<mpadded>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2023⁩.

* Some parts of this feature may have varying levels of support.

The<mpadded>MathML element is used to add extra padding and to set the general adjustment of position and size of enclosed contents.

Attributes

This element's attributes include theglobal MathML attributes as well as the following attributes:

depth: A<length-percentage> indicating the desired depth (below the baseline) of the<mpadded> element.
height: A<length-percentage> indicating the desired height (above the baseline) of the<mpadded> element.
lspace: A<length-percentage> indicating the horizontal location of the positioning point of the child content with respect to the positioning point of the<mpadded> element.
voffset: A<length-percentage> indicating the vertical location of the positioning point of the child content with respect to the positioning point of the<mpadded> element.
width: A<length-percentage> indicating the desired horizontal length of the<mpadded> element.

Legacy syntax

For thedepth,height,lspace,voffset andwidth attributes, some browsers may instead accept a more complex syntax:

An optional+ or- sign as a prefix, specifying an increment or decrement to the corresponding dimension (if absent, the corresponding dimension is set directly to specified value).
Followed by an<unsigned-number> (let's call it α below).
Optionally followed by a value (if absent, the specified value is interpreted as "100 times α percent").
- Aunit. The specified value is interpreted the same aslegacy MathML lengths.
- Anamedspace constant. The specified value is interpreted as α times the constant.
- A pseudo-unitwidth,height ordepth. The specified value is interpreted as α times the corresponding dimension of the content.
- A percent sign followed by a pseudo-unitwidth,height ordepth. The specified value is interpreted as α% the corresponding dimension of the content.

Examples

Dimensions and offsets

html

<math display="block">  <mpadded width="400px" height="5em" depth="4em" lspace="300px" voffset="-2em">    <mi>x</mi>    <mo>+</mo>    <mi>y</mi>  </mpadded></math>

css

mpadded {  background: lightblue;}

Legacy syntax

html

<math display="block">  <!-- increment by a length -->  <mpadded width="+20px">    <mtext>+20px</mtext>  </mpadded>  <!-- set to a pseudo-unit -->  <mpadded width="2width">    <mtext>2width</mtext>  </mpadded>  <!-- increment by a percent of a pseudo-unit -->  <mpadded width="+400%height">    <mtext>+400%height</mtext>  </mpadded>  <!-- decrement to a multiple of a namedspace -->  <mpadded width="-1thickmathspace">    <mtext>-1thickmathspace</mtext>  </mpadded></math>

css

mpadded:nth-child(1) {  background: lightblue;}mpadded:nth-child(2) {  background: lightgreen;}mpadded:nth-child(3) {  background: lightyellow;}mpadded:nth-child(4) {  background: pink;}