html - How to vertical align text within a list containing superscript? -
i want align text within list of items containing superscript such main text equally spaced vertically:
html:
<ul> <li>shape: rectangle</li> <li>length: 5m</li> <li>breadth: 3m</li> <li>area: 15m<sup>2</sup></li> <li>color: blue</li> </ul>
i have tried tinkering display
, height
, line-height
, vertical-align
properties in css. none seems work. can me please? thanks.
the cause of problem superscripts tend make line spacing uneven. setting line-height
sufficiently large value 1.3 may help. in general, best avoid using sup
element , construct own superscript element, using span
, style creates superscript using relative positioning (which not affect line spacing, unlike vertical alignment caused sup
).
in specific case, there simpler , better approach: instead of <sup>2</sup>
, use ²
, or enter directly superscript 2 character “²” (on windows, can using alt 0178). being normal character, not affect line spacing, , being designed typographer, can expected better superscript 2 created using html or css.
Comments
Post a Comment