Search code examples
htmlcsshtml-tablesubscript

Adding subscript with different font inside a span

I'm displaying a percentage in my website like 44%. Both value and subscript are of different font. The subscript is not coming correctly.

I'm sharing the code below:

<table>
<tr>
  <td>
    <b>
    <div style='display:block;'>
	<span style='font-size: 220px;line-height: 200px;'>44
            <span style='font-size:20px;display: inline-block;vertical-align: top;'><sup>%</sup>
	</span>
	</span>
  </div>
</b>
</td>
</tr>
</table>

I want the percentage symbol just above and very close to the value. Now there is lot of space between the value and % symbol. Can anyone help me to fix this?

Thanks in advance.

Solution

  • Consider adding line-height to the <sup> as well.

    <table>
<tr>
  <td>
    <b>
    <div style='display:block;'>
	<span><span style='font-size: 220px;line-height: 200px;'>
  44<sup style='vertical-align:top;font-size:20px;line-height: 50px;'>%</sup></span>
	</span>
  </div>
</b>
</td>
</tr>
</table>