CSS에서 줄 높이를 설정하는 방법
- 青灯夜游원래의
- 2021-04-02 14:27:3110377검색
CSS에서는 line-height 속성을 사용하여 줄 높이를 설정할 수 있습니다. 예를 들어 "line-height: 10px;" 스타일을 지정된 요소에 추가하면 됩니다. ". line-height 속성은 선 사이의 거리(라인 높이)를 설정할 수 있으며, 음수 값은 허용되지 않습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
줄 높이란 텍스트 줄의 기준선 사이의 수직 거리를 나타냅니다. 이 문장을 이해하려면 먼저 몇 가지 기본 지식을 이해해야 합니다.
상위선, 중간선, 기준선, 하단선
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
위에서 아래까지의 네 줄은 윗선, 중간선, 기준선, 하단선. 은 영어 글자를 배울 때 4줄과 3칸 공백과 매우 유사합니다. 우리는 수직 정렬 속성에 이 4줄과 관련된 상단, 중간, 기준선 및 하단이 있음을 알고 있습니다.
특히 기준선은 최종선이 아니라 최종선이 최종선이라는 점을 기억하세요.
줄 높이, 줄 간격 및 반 간격
줄 높이는 컨텍스트 줄의 기준선 사이의 수직 거리, 즉 그림에서 두 개의 빨간색 선 사이의 수직 거리를 나타냅니다.
Leading은 한 행의 맨 아래 선에서 다음 행의 맨 위 선까지의 세로 거리, 즉 첫 번째 행의 분홍색 선과 두 번째 행의 녹색 선 사이의 세로 거리를 말합니다.
반 줄 간격은 줄 간격의 절반, 즉 영역 3/2의 세로 거리, 영역 1, 2, 3, 4의 거리의 합이 줄 높이, 영역 1, 2, 4의 거리가 글꼴 크기이므로 절반 줄 간격도 다음과 같이 계산할 수 있습니다. (줄 높이 - 글꼴 크기)/2
콘텐츠 영역, 인라인 상자, 줄 상자
콘텐츠 영역: 하단 라인과 상단 라인으로 둘러싸인 영역, 즉 하단 라인 그림 어두운 회색 배경 영역입니다.
인라인 상자, 각 인라인 요소는 브라우저 렌더링 모델의 개념이며 다른 요소(패딩 등)가 없으면 표시할 수 없습니다. 상자 상자는 내용 영역과 동일합니다. 줄 높이를 설정할 때 인라인 상자의 높이는 변경되지 않습니다. 줄 간격[(줄 높이-글꼴 크기)/2]이 위쪽으로 증가/감소합니다. 각각 콘텐츠 영역(짙은 파란색 영역)
라인 상자(라인 상자), 라인 상자는 이 라인의 가상 직사각형 상자를 의미하며 실제로 표시되지 않습니다. . 라인 박스의 높이는 이 행의 모든 요소 중 인라인 박스의 가장 큰 값과 같습니다(행 높이 값이 가장 큰 인라인 박스가 벤치마크로 사용되며, 다른 인라인 박스는 자체 기준을 사용하여 벤치마크에 정렬됨). 줄 상자의 높이가 최종적으로 계산됩니다. 여러 줄 내용이 있는 경우 각 줄에는 자체 줄 상자가 있습니다.
<div> <span>中文English</span> <span>中文English</span> <span>English中文</span> <span>English中文</span> </div>
(동영상 공유 학습: css 동영상 튜토리얼)
line-height
이제 기본 개념이 명확해졌으니, 이번 주제의 주인공인 line-height 속성에 대해 이야기해보겠습니다. 기사.
정의: line-height 속성은 선 사이의 거리(선 높이)를 설정하며 음수 값은 사용할 수 없습니다. 이 속성은 라인 상자의 레이아웃에 영향을 줍니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다. 줄 높이와 글꼴 크기(줄 간격) 사이의 계산된 차이는 두 부분으로 나누어 텍스트 줄의 위쪽과 아래쪽에 추가됩니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.
가능한 값
| 值 | 说明 |
| normal | 默认,设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p.small {
line-height: 90%
}
p.big {
line-height: 200%
}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
</p>
</body>
</html>效果图：
更多编程相关知识，请访问：编程视频！！
위 내용은 CSS에서 줄 높이를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!