글꼴 크기 란 무엇입니까? 왜이 두 상자의 높이가 다른가요?

Question

글리프 콘 정렬로 고생하고있는 중, 분명히 글꼴 크기 조정이 어떻게 작동하는지 이해할 수 없습니다. In this fiddle 동일한 글꼴 크기에서 기호가 포함 된 두 개의 div가 있지만 결국 다른 높이가됩니다.

body { 
 
    line-height: 1; 
 
    font-family: Helvetica; 
 
    font-size: 60px; 
 
} 
 
.wrapper { 
 
    background: lightblue; 
 
    width: 300px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.left { 
 
    width: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    background: darkred; 
 
} 
 
.right { 
 
    width: 50%; 
 
    position: absolute; 
 
    right: 0; 
 
    background: darkgreen; 
 
} 
 
.text::before { 
 
    content: "60px"; 
 
} 
 
.myglyphicon { 
 
    font-family: 'Glyphicons Halflings'; 
 
} 
 
.myglyphicon::before { 
 
    content: "\e046"; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <div class="left"> 
 
    <span class="myglyphicon"></span> 
 
    </div> 
 
    <div class="right"> 
 
    <span class="text"></span> 
 
    </div> 
 
</div>

다른 글꼴 종류가 같은 글꼴 크기에 대해 서로 다른 높이를 생성 할 수 있지만, div.right는 대형 범위를 무시하고 올바른 (라인을 가지고 왜 난 아직도 이해가 안 보인다 -) 높이가 60px이지만 div.left은 아닙니까? 스팬 높이가 4px 차이지만 div는 9px 차이가 있습니다.

Answer 1

사실 그들은 같은 높이입니다. inspect 요소를 사용하여 어떤 일이 일어나고 있는지 확인하십시오. 문제는 컨테이너와 스팬의 위치입니다. myglyphicon에 표시 블록을 추가하면 둘 다의 스팬 위치가 동일합니다.

.myglyphicon::before { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e046"; 
    display: block; 
}