CODEWITHSUNDEEP
htmlcssvertical-alignmenttypography
Ben Dauphinee
Ben Dauphinee

Reputation: 4181

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

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.

HTML
<div>
  <b>Legend:</b>
  <span class="dotib">&#8226;</span>
</div>

CSS
.dotib{font-size: 36pt; line-height: 12pt;}

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/

Upvotes: 1

Views: 191

Answers (1)

Brian Salta
Brian Salta

Reputation: 1576

Change to this:

.dotib {
    font-size: 36pt; 
    line-height: 12pt;
    vertical-align:middle;
    padding-bottom:5px;
}

http://jsfiddle.net/TzFff/1/

Upvotes: 3

Related Questions