줄 높이를 변경하는 것이 글꼴의 맨 위에만 영향을주는 이유는 무엇입니까?

Question

다른 색상 아이콘을 만들기 위해 도트 HTML 문자로 작업하고 있습니다. 내가 겪고있는 문제는 line-height 속성이 문자의 맨 위가 놓이는 위치에만 영향을 미친다는 것입니다. 텍스트의 표준 글꼴 크기와 일치하는 줄 높이가 설정된 경우에도 도트 아이콘을 일반 텍스트와 올바르게 정렬 할 수 없습니다.

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

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

이 도트가 예상대로 작동하도록하는 더 좋은 방법이 있습니까?

여기 jsFiddle는이 코드입니다 : 이것에 http://jsfiddle.net/TzFff/

Answer 1

변경 :

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

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