How to Use <math> as a block element in the HTML page layout?

If you want to use <math> as a block element like a <div> or <p> element, you need add the display="block" option in the <math> tag.

Main features of using <math> as a block element:

• display="block" option is required in <math> tag.
• display="block" implies displaystyle="normal", which maintains the same font size for fractions and default location for overscripts and underscripts.
• If <math display="block"> is used inside <p>, it will be rendered an entire new line aligned to the center.
• 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.

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

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

<p><math> as block elements:
</p>

<math display="block">
<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="block">
<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="block">
<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><math> as block elements 

<math display="block">
<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="block">
<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="block">
<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>

inside <p>.
</p>

</body>
</html>

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

⇒ Align to Left in "math" Block Element

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

⇑ Introduction to MathML (Mathematical Markup Language)

⇑⇑ MathML (Mathematical Markup Language)