<mpadded>

Baseline 2023 *
Newly available

Since January 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* 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 the global 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 the depth, height, lspace, voffset and width attributes, some browsers may instead accept a more complex syntax:

  1. 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).
  2. Followed by an <unsigned-number> (let's call it α below).
  3. Optionally followed by a value (if absent, the specified value is interpreted as "100 times α percent").
    • A unit. The specified value is interpreted the same as legacy MathML lengths.
    • A namedspace constant. The specified value is interpreted as α times the constant.
    • A pseudo-unit width, height or depth. The specified value is interpreted as α times the corresponding dimension of the content.
    • A percent sign followed by a pseudo-unit width, height or depth. 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"
    style="background: lightblue">
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </mpadded>
</math>

Legacy syntax

html
<math display="block">
  <!-- increment by a length -->
  <mpadded width="+20px" style="background: lightblue">
    <mtext>+20px</mtext>
  </mpadded>

  <!-- set to a pseudo-unit -->
  <mpadded width="2width" style="background: lightgreen">
    <mtext>2width</mtext>
  </mpadded>

  <!-- increment by a percent of a pseudo-unit -->
  <mpadded width="+400%height" style="background: lightyellow">
    <mtext>+400%height</mtext>
  </mpadded>

  <!-- decrement to a multiple of a namedspace -->
  <mpadded width="-1thickmathspace" style="background: pink">
    <mtext>-.5thickmathspace</mtext>
  </mpadded>
</math>

Technical summary

Specifications

Specification
MathML Core
# adjust-space-around-content-mpadded

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mpadded
depth
height
lspace
Named spaces (e.g. thinmathspace to mean 3/18em)
DeprecatedNon-standard
Nonzero unitless values (e.g. 5 to mean 500%)
DeprecatedNon-standard
Pseudo units (e.g. width to mean content width)
DeprecatedNon-standard
Relative values (e.g. "+10px")
Non-standard
<unsigned-number> as a scale factor or percent
DeprecatedNon-standard
voffset
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

See also