How to Use <math> as an inline element in the HTML page layout?

By default a <math> element is rendered as an inline element in the HTML page layout like a <span> element.

Main features of using <math> as an inline element:

• display="inline" option is the default option in <math> tag.
• display="inline" implies displaystyle="compact", which reduces the height by using smaller fonts for fractions and shifting overscripts and underscripts.
• Long formula in <math> tag will be wrapped to new lines to stay within the boundary of the parent element.
• Padding, border, and margin can be added to the <math> tag using CSS properties. But some Web browser may fail to adjust the height of the <math> element.

Here is an HTML document, math-as-Inline-Element.html, that shows you how to use <math> as an inline element:

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<style>
p {background-color: #e7e7e7;}
math {border: 1px solid #ff4444; background-color: #ffdddd;}
math.padded {padding: 0.5em;}
</style>
</head>
<body>

<p><math> as inline elements:

<math>
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math display="inline">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math>
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn>
<mo>+</mo><mn>7</mn><mo>+</mo><mn>8</mn><mo>+</mo><mn>9</mn><mo>+</mo><mo>…</mo>
</math>
</p>

<p><math> as padded inline elements:

<math class="padded">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math class="padded">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math class="padded">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn>
<mo>+</mo><mn>7</mn><mo>+</mo><mn>8</mn><mo>+</mo><mn>9</mn><mo>+</mo><mo>…</mo>
</math>
</p>

</body>
</html>

Here is how the above HTML document is rendered in Firefox:

⇒ Use display="inline" with displaystyle="normal"

⇐ "math" - MathML Root Element

⇑ Introduction to MathML (Mathematical Markup Language)

⇑⇑ MathML (Mathematical Markup Language)