CSS for mathematical root or logarithm in html

Instead of using other CSS properties like, position, float and margin and padding we can use <SUP>
and <SUB> element in html in order to design any mathematical expression in html. have a look on given example with output.

 
 
<h2>Square root of n using SUP</h2>
2<sup class="up">2</sup> = 4 <br />
3<sup class="up">2</sup> = 9 <br />
4<sup class="up">2</sup> = 16 <br />
5<sup class="up">2</sup> = 25 <br />
 
 
<h2>Logarithm of n using SUB</h2>
log<sub>10</sub>1 = 0 <br />
log<sub>10</sub>10 = 1 <br />
log<sub>10</sub>100 = 2 <br />
log<sub>10</sub>1000 = 3 <br />
 
 
 
 
 
 
 
 
<hr />
 
<style>
    sup.up {
        vertical-align: super;
        font-size: smaller;
    }
 
    sup.down {
        vertical-align: sub;
        font-size: smaller;
    }
</style>
 
<h2>Logarithm of n using SUB and CSS</h2>
log<sup class="down">10</sup>1 = 0 <br />
log<sup class="down">10</sup>10 = 1 <br />
log<sup class="down">10</sup>100 = 2 <br />
log<sup class="down">10</sup>1000 = 3 <br />
 
 
 
<h2>Square root of n using SUB and CSS</h2>
2<sup>2</sup> = 4 <br />
3<sup>2</sup> = 9 <br />
4<sup>2</sup> = 16 <br />