HTML5 MathML
HTML5 MathML <mpadded> Tag
The <mpadded> element adjusts the space around its content without changing what is rendered. You can grow or shrink the reported width, height and depth, and shift the content, to fine-tune layout.
Definition and Usage
<mpadded> is a transparent wrapper: it draws its child normally but reports a modified bounding box to the surrounding formula. This is useful for nudging symbols, adding breathing room, or overlapping elements. Lengths may be absolute (px, em) or relative to the content.
Attributes
| Attribute | Description |
|---|---|
| width | New advance width of the content. |
| height | New height above the baseline. |
| depth | New depth below the baseline. |
| lspace | Space added to the left of the content. |
| voffset | Vertical shift of the content (positive raises it). |
Example
This adds extra left space and raises a term slightly to separate it from its neighbours.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathML mpadded</title>
</head>
<body>
<math display="block">
<mrow>
<mi>a</mi>
<mo>+</mo>
<mpadded lspace="1em" voffset="0.2em">
<mi>b</mi>
</mpadded>
</mrow>
</math>
</body>
</html>💡
Set width="0" to make content overlap with what follows - a trick for stacking symbols. Use sparingly; heavy manual spacing can hurt readability.
Key Takeaways
- <mpadded> changes the reported size and position of its content.
- width, height, depth, lspace and voffset control the adjustments.
- The content itself renders unchanged - only its bounding box moves.