Why does changing the line-height only affect the top of the font?

pennysheep

New Member
I'm working with the dot HTML character to make different color icons. The problem that I'm running into is that the line-height property seems to only affect where the top of the character is placed. I can't get the dot icon to line up with regular text properly, even with a line-height set that matches the standard font-size of the text.\[code\]HTML<div> <b>Legend:</b> <span class="dotib">•</span></div>CSS.dotib{font-size: 36pt; line-height: 12pt;}\[/code\]Is there a better way to make this dot behave like I expect it to?Here's a jsFiddle with this code in it: http://jsfiddle.net/TzFff/
 
Back
Top