HTML5가 font-size보다 작은 줄 높이를 무시하는 이유는 무엇입니까?

정말 작은 줄 높이로 설정해야하는 헤드 라인이 포함 된 HTML5로 일부 페이지를 전환합니다. 이제 <!DOCTYPE html>부터 font-size 아래의 줄 높이는 무시됩니다. 나는 그들을 내가 원하는 모든 공간에 놓을 수는 있지만, 서로 가깝게 데려 갈 기회는 없다. 그 이유는 누구나 알 수 있습니다.
감사합니다. 토마스HTML5가 font-size보다 작은 줄 높이를 무시하는 이유는 무엇입니까?

편집 : 발견했습니다. 내 오래된 마크 업은 <a style="line-height:12px;" href="#">something</a>이며 XHTML 1.0 과도기에서는 작동했지만 HTML5에서는 작동하지 않았습니다.
<div style="line-height:12px;"><a href="#">something</a>으로 변경했습니다.
감사합니다.

출처

2011-02-16 thomas

HTML5가 아닌 doctype이 동일한 동작을 유발하지 않습니까? – BoltClock

나는 이것이 브라우저에 의존하고 HTML5의 일반적인 동작이 아니라고 확신한다. – Nick

라인 높이를 어떻게 설정하고 있습니까? (그리고 어떤 브라우저를 사용하고 있습니까?) –

귀하의 <a> 태그는 인라인 요소이며 (즉, 바로 위 부모 인 경우 또는 최대 <body> 스타일에 모든 방법)는 HTML5 인라인 요소에 부모 '블록'요소의 라인 높이로 연기를 표시 .

예 :

body { line-height:20px; } 
a { line-height:12px; }

이 태그 :

<body> 
    <a href="#">test</a> 
</body>

가 <a> 태그가없는 20 픽셀 12 픽셀의 라인 높이를 가질 것이다.

그래서 '블록'수준 인 <div> 요소로 줄 바꿈했을 때 '인라인'<a style="line-height:12px;" href="#">something</a>이 작동하지 않았지만 블록 요소가 줄 높이를 지시 할 수 있습니다.

블록 요소에 인라인 요소를 래핑하여 마크 업을 늘리는 것보다 더 좋은 방법은 CSS를 사용하여 태그를 '인라인 블록'으로 표시하는 것입니다.CSS 파일에서 다음

<a class="xx" href="#">something</a>

설정 '인라인 블록'에 해당 클래스 :

<a style="display:inline-block; line-height:12px;" href="#">something</a>

는 더 나은, 당신의 <a> 클래스 제공 (변경을 의미 뭔가 이하 'XX') :

.xx { display:inline-block; line-height:12px; }

희망이 있습니다.

출처

2012-03-21 23:34:25 ucsarge

정말 멋진 잡기. 하위 요소가'displa : inline-block '을 가지고 있지 않으면 왜'inline-height'가 부모의 값보다 작을 때 이것을 무시하는지 설명해주십시오. –

줄 높이가 글꼴 크기보다 작을 때만 완전히 무시하는 것처럼 보이지 않으므로 특히 관심이 있습니다. – Chris

이 답변은 오늘 나를 도왔습니다. 감사! – Roger

코드가 있습니까? 관계없는 패딩이나 여백이 있습니까?

이 당신은 ... 예컨대을 같은 줄 높이를 공유하지 않습니다 IE8 및 IE7에 그들을로 큰 텍스트 크기를 사용할 필요가 파이어 폭스, 크롬과 IE8

<!DOCTYPE html> 
<html> 
<head> 
<title>aaa</title> 
<style type="text/css"> 
p {font-size:18px;line-height:3px;background-color:#ccc;} 
</style> 
</head> 
<body> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
</body> 
</html>

출처

2011-02-16 14:37:57 Emily

에 나를 위해 작동합니다.

이 예는 30px 텍스트 크기에서 IE7 및 IE8의 행 높이가 Chrome 및 FF와 동일하지 않음을 보여줍니다.

<!DOCTYPE html> 
<html> 
<head> 
<title>aaa</title> 
<style type="text/css"> 
p {font-size:30px;line-height:3px;background-color:#ccc;} 
</style> 
</head> 
<body> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
</body> 
</html>

이 예는 안에 모든 브라우저는 우리가 IE8까지 사용할 필요가 있고 아래에 사망하지만 height.em 오래된 시스템 같은 줄을 표시하여 보여줍니다. 좋은 습관입니다.

<!DOCTYPE html> 
<html> 
<head> 
<title>aaa</title> 
<style type="text/css"> 
p {font-size:30px;line-height:0.2em;background-color:#ccc;} 
</style> 
</head> 
<body> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p> 
</body> 
</html>

출처

2011-02-16 16:23:05 Undefined

모든 블록 수준 요소에는 "strut"라는 너비 0 문자가 있습니다. 그것은 라인 박스의 높이 계산에 참여할 것입니다. 어린이의 선 높이가 부모의 선 높이보다 작 으면 부모의 선 높이가 선의 높이가 더 작을 때 선 상자를 유지하기 때문에 선의 높이가 무시되는 것처럼 보입니다.

출처

2017-09-07 07:16:48 xwchris

HTML5가 font-size보다 작은 줄 높이를 무시하는 이유는 무엇입니까?

답변

관련 문제