En HTML, existe el uso de y etiquetas para definir el texto en subíndice y superíndice. El texto en superíndice aparece en una fuente más pequeña y medio carácter encima de la línea normal. Generalmente se usa para escribir ecuaciones matemáticas (como X²+ y²=r² ), notas a pie de página y muchos más.

A diferencia del superíndice, el texto del subíndice aparece en una fuente más pequeña y medio carácter debajo de la línea normal. Generalmente se utiliza para escribir ecuaciones químicas o fórmulas químicas como h₂OH₂ENTONCES₄, etc.

En CSS, el alineación vertical La propiedad se utiliza para lograr lo mismo. También podemos especificar el superíndice y el subíndice del texto usando CSS. Esta propiedad CSS especifica la alineación vertical del texto.

Ahora, veamos cómo lograr el superíndice y el subíndice usando el alineación vertical propiedad.

Sintaxis

 vertical-align: baseline | super | sub ; 

Valores de propiedad

base: Es el valor predeterminado que alinea el texto con la línea base del elemento principal.

súper: Es el superíndice el que eleva el texto.

sub: Es el subíndice el que baja el texto.

cuando los valores súper y sub de esta propiedad se aplican, entonces el texto se convierte en superíndice o subíndice.

Ejemplo: superíndice

 #super{ vertical-align:super; font-size: medium; } p{ font-weight: bold; font-size: 20px; } <p> Its common examples are chemical equations. </p> <h3> Chemical formula of Water is: H<span id="sub">2</span>O</h3> <h3> Ch emical formula of Sulphuric acid is: H<span id="sub">2</span>SO<span id="sub">4</span></h3>