CSS Superscript & Subscript

In CSS, you can create superscript and subscript text by using the vertical-align property to adjust the positioning of the text relative to the baseline. Superscript text is raised above the baseline, while subscript text is lowered below the baseline.

To create superscript text, use the following CSS:

sup {
  vertical-align: super;
  font-size: smaller; /* Optional: Adjust the size of the superscript text */
}

In this example, the <sup> element is used to mark the superscript text. The vertical-align: super; property raises the content of the <sup> element above the baseline, creating a superscript effect. The font-size: smaller; property is optional but can be used to adjust the size of the superscript text to make it visually smaller than the regular text.

Example:

<p>E=mc<sup>2</sup></p>

To create subscript text, use the following CSS:

sub {
  vertical-align: sub;
  font-size: smaller; /* Optional: Adjust the size of the subscript text */
}

In this example, the <sub> element is used to mark the subscript text. The vertical-align: sub; property lowers the content of the <sub> element below the baseline, creating a subscript effect. The font-size: smaller; property is optional but can be used to adjust the size of the subscript text.

Example:

<p>H<sub>2</sub>O</p>

By combining the vertical-align property with appropriate HTML elements (<sup> for superscript and <sub> for subscript), you can create correctly formatted superscript and subscript text in your web pages. Remember that the visual appearance of the superscript and subscript text can vary based on the font and browser used, so always test your styles across different environments to ensure consistent results.