CSS의 줄 높이에 대한 심층적 이해

Syntax:
line-height: 일반 | 길이
Parameters:
normal: 기본 줄 높이
length: 백분율 숫자 | 부동 소수점 숫자와 단위 식별자로 구성된 길이 값, 음수 값 허용됩니다. 백분율 값은 글꼴의 높이 크기를 기준으로 합니다. 길이 단위 참조
설명 :
개체 의 행 높이를 검색하거나 설정합니다. 즉, 글꼴 하단과 글꼴 내부 상단 사이의 거리입니다.
연속된 개체가 여러 개인 경우 최대 행 높이가 적용됩니다. 이때 행 높이는 음수 값이 될 수 없습니다.
해당 스크립트 기능은 lineHeight입니다. 제가 쓴 다른 책들도 참조해 주세요.
예:

div {line-height:6px; } 
div {line-height:10.5; }

CSS에서 줄 높이와 높이의 차이점은 무엇인가요?

간단히 말하면 line-height는 줄 높이를 의미하고 height는 요소 자체의 높이를 정의합니다.
예를 들어 다음 코드
410e38985a3c1e8b5219c50cd6add5b9Text text text text text text text text text text text text text text text text16b28748ea4df4d9c2150843fecfba68 {line-height:20px;}을 테스트하면 이 요소의 실제 높이는 콘텐츠에 따라 달라집니다. 텍스트 부분이 브라우저에 선으로 표시되면 이 div의 실제 높이는 20px입니다. 두 줄로 표시되면 div의 실제 높이는 40px이고 텍스트의 줄 높이는 20px입니다.
.test{height:40px}를 정의하면 이 요소의 실제 높이는 일반적으로 다음의 영향을 받지 않습니다. 내용의 양이 변경됩니다. 텍스트가 한 줄로 표시되면 div의 높이는 여전히 40px입니다. 2줄로 표시되지만 텍스트의 줄 높이가 20px 미만이면 div의 높이가 됩니다. 텍스트 내용의 높이가 높이보다 작기 때문에 변경되지 않습니다. 그러나 텍스트 콘텐츠의 높이가 40px보다 크면 일반적으로 div의 높이도 그에 따라 증가합니다.

line-height와 line box height
Height와 line-height는 CSS에서 높이 역할을 해야겠죠? 레이블이 높이 속성 (백분율 높이 포함)을 정의하지 않는 경우 IE6의 기본 높이 버그가 약 11픽셀인 경우에도 최종 표시 높이는 줄 높이로 결정되어야 합니다. 천천히 말씀드리겠습니다.

먼저 누구나 잘 알고 있는 현상에 대해 이야기해 보겠습니다.

라는 빈 div가 있습니다. 높이 값이 1픽셀 이상으로 설정되지 않은 경우, div는 0이 됩니다. div에 공백이나 텍스트를 입력하면 div에 높이가 지정됩니다. 그러면 div에 텍스트가 있는 뒤에 왜 높이가 있는지 생각해 본 적이 있나요?

아주 간단한 질문인 것 같지만, line-height를 이해하는데 있어서 매우 중요한 질문입니다. 어떤 사람들은 말이 마음을 열어두기 때문이라고 생각할 수도 있습니다! 텍스트가 공간을 차지하고 자연스럽게 div가 늘어납니다. 처음에는 이렇게 이해했지만, 사실 인라인 모델을 깊이 이해하고 나니 div의 높이를 확장하는 것은 전혀 텍스트가 아니라 line-height라는 것을 알게 되었습니다!

line-height에 대한 참고 사항

1. line-height는 텍스트에만 작동하며

pictures에서는 작동하지 않습니다. 2. 실시간 선 높이 효과를 보려면 dreamweaver를 사용하세요. value 음수 값은 사용할 수 없으며, 사용하면 유효하지 않습니다. 각 브라우저마다 line-height 솔루션에 미묘한 차이가 있는 경우 상단과 하단 사이에 1px 차이가 있습니다. 행 높이가 짝수인 경우 대부분의 브라우저 해석은 여전히 ​​상대적으로 정상입니다. 홀수인 경우 일부 브라우저는 상단보다 하단이 1px 더 많고 일부 웹사이트의 경우 하단이 상단보다 1px 더 많습니다. 엄격한 요구사항으로 인해 라인 높이를 디자인할 때 짝수를 사용하는 것이 좋습니다

위 내용은 CSS의 줄 높이에 대한 심층적 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!