왜 텍스트가 그 줄을 완전히 채우지 않습니까?

텍스트의 높이가 라인과 정확히 일치하는지 확인해야합니다. 그러나 글꼴 크기와 줄 높이가 같을 때 텍스트는 줄보다 약간 작습니다. See Fiddle. 텍스트 변환 : 여기에서 대문자를 사용하므로 'y'와 같이 튀어 나와 나오는 부분이 없습니다. 어떤 아이디어로 그것을 고치는 법?왜 텍스트가 그 줄을 완전히 채우지 않습니까?

<div> Some Text</div> 

div { 
    display:inline-block; 
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif; 
    font-size: 20px; 
    line-height: 20px; 
    text-transform: uppercase; 
    background-color: lightgreen; 
    padding: 0; 
    margin: 0; 
}

출처

2013-01-18 skyisred

이 질문조차도 이해가 가지 않습니다. – Dyn

나는 바이올린에 문제가 보이지 않습니까? –

텍스트의 위쪽과 아래쪽에 패딩 픽셀이 거의 없습니다. 그 (것)들을 제거하는 것을 시도해, 그 본문은 그것의 콘테이너의 바닥 그리고 정상을 만질 것이다 그래야 – skyisred

글꼴의 최대 크기는 font-size입니다. 귀하의 예에서는 È이 전체 높이를 채 웁니다. 따라서 액센트가있는 문자를 사용하지 않으려면 line-height에서 1 또는 2 픽셀을 제거해야합니다. 당신은 당신의 라인 높이를 줄이는 시도 할 수

div { 
    display:inline-block; 
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif; 
    font-size: 20px; 
    line-height:15px; 
    text-transform: uppercase; 
    background-color: red; 
    padding: 0; 
    margin: 0; 
}

출처

2013-01-18 20:28:51 Tchoupi

@skyisred 나의 대답을 편집했다 – Tchoupi

나는 당신의 편집을보기 전에 배치했다, 그러나 당신의 응답은 정확하다, 그래서 당신을위한 upvote. –

@TracyFu 예 귀하가 동시에 게시 한 것으로 나타났습니다. upvote 주셔서 감사합니다 :) – Tchoupi

이 좋은 결과를 줄 것으로 보인다. line-height가 font-size와 같을 때 텍스트를 대문자로 변환했는지 여부에 관계없이 오름차순 및 내림차순으로 제안한대로 'y'와 같은 자리 표시자를 허용합니다.

http://jsfiddle.net/tracyfu/UwLm7/15/

div { 
    display:inline-block; 
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif; 
    font-size: 20px; 
    line-height: 15px; 
    text-transform: uppercase; 
    background-color: red; 
    padding: 0; 
    margin: 0; 
}

출처

2013-01-18 20:31:47

@mathieu 올바른 것입니다. 다음을 사용하여 속임수를 쓸 수 있습니다.

line-height: 16px; 
vertical-align: text-top;

출처

2013-01-18 20:32:23 Eric

왜 텍스트가 그 줄을 완전히 채우지 않습니까?

답변

관련 문제