CSS에서 줄 높이를 설정하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 줄 높이를 설정하는 방법

青灯夜游

Apr 02, 2021 pm 02:27 PM

css행 높이

CSS에서는 line-height 속성을 사용하여 줄 높이를 설정할 수 있습니다. 예를 들어 "line-height: 10px;" 스타일을 지정된 요소에 추가하면 됩니다. ". line-height 속성은 선 사이의 거리(라인 높이)를 설정할 수 있으며, 음수 값은 허용되지 않습니다.

CSS에서 줄 높이를 설정하는 방법

이 튜토리얼의 운영 환경: 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>

CSS에서 줄 높이를 설정하는 방법

위에서 아래까지의 네 줄은 윗선, 중간선, 기준선, 하단선. 은 영어 글자를 배울 때 4줄과 3칸 공백과 매우 유사합니다. 우리는 수직 정렬 속성에 이 4줄과 관련된 상단, 중간, 기준선 및 하단이 있음을 알고 있습니다.

특히 기준선은 최종선이 아니라 최종선이 최종선이라는 점을 기억하세요.

줄 높이, 줄 간격 및 반 간격

줄 높이는 컨텍스트 줄의 기준선 사이의 수직 거리, 즉 그림에서 두 개의 빨간색 선 사이의 수직 거리를 나타냅니다.

Leading은 한 행의 맨 아래 선에서 다음 행의 맨 위 선까지의 세로 거리, 즉 첫 번째 행의 분홍색 선과 두 번째 행의 녹색 선 사이의 세로 거리를 말합니다.

반 줄 간격은 줄 간격의 절반, 즉 영역 3/2의 세로 거리, 영역 1, 2, 3, 4의 거리의 합이 줄 높이, 영역 1, 2, 4의 거리가 글꼴 크기이므로 절반 줄 간격도 다음과 같이 계산할 수 있습니다. (줄 높이 - 글꼴 크기)/2

CSS에서 줄 높이를 설정하는 방법

콘텐츠 영역, 인라인 상자, 줄 상자

콘텐츠 영역: 하단 라인과 상단 라인으로 둘러싸인 영역, 즉 하단 라인 그림 어두운 회색 배경 영역입니다.

CSS에서 줄 높이를 설정하는 방법

인라인 상자, 각 인라인 요소는 브라우저 렌더링 모델의 개념이며 다른 요소(패딩 등)가 없으면 표시할 수 없습니다. 상자 상자는 내용 영역과 동일합니다. 줄 높이를 설정할 때 인라인 상자의 높이는 변경되지 않습니다. 줄 간격[(줄 높이-글꼴 크기)/2]이 위쪽으로 증가/감소합니다. 각각 콘텐츠 영역(짙은 파란색 영역)

라인 상자(라인 상자), 라인 상자는 이 라인의 가상 직사각형 상자를 의미하며 실제로 표시되지 않습니다. . 라인 박스의 높이는 이 행의 모든 요소 중 인라인 박스의 가장 큰 값과 같습니다(행 높이 값이 가장 큰 인라인 박스가 벤치마크로 사용되며, 다른 인라인 박스는 자체 기준을 사용하여 벤치마크에 정렬됨). 줄 상자의 높이가 최종적으로 계산됩니다. 여러 줄 내용이 있는 경우 각 줄에는 자체 줄 상자가 있습니다.

<div>
                <span>中文English</span>
                <span>中文English</span>
                <span>English中文</span>
                <span>English中文</span>
            </div>

CSS에서 줄 높이를 설정하는 방법

(동영상 공유 학습: 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에서 줄 높이를 설정하는 방법