CSS의 줄 높이는 무엇입니까-프런트엔드 Q&A-php.cn

CSS의 줄 높이는 무엇입니까

青灯夜游

풀어 주다： 2023-01-05 16:11:42

원래의

4511명이 탐색했습니다.

줄 높이에는 콘텐츠 영역과 콘텐츠 영역을 기준으로 대칭적으로 확장된 빈 영역이 포함되며 일반적으로 인접한 텍스트 줄의 기준선 사이의 수직 거리로도 간주될 수 있습니다. CSS에서는 line-height 속성을 사용하여 줄 높이를 설정할 수 있습니다. 이 속성은 줄 사이의 거리(줄 높이)를 설정하며 음수 값은 허용되지 않습니다.

CSS의 줄 높이는 무엇입니까

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. 기준선, 하단선, 상단선

CSS의 줄 높이는 무엇입니까

줄 높이에는 일반적으로 콘텐츠 영역을 기준으로 대칭적으로 확장되는 공백 영역이 포함됩니다. 인접한 텍스트 줄의 기준선 사이의 공간 수직 거리.
기준은 한자의 아랫변이 아닌 영문자 "x"

2. 줄 간격, 줄 높이

行距和CSS의 줄 높이는 무엇입니까

3.

밑줄과 윗줄로 둘러싸인 영역은 현실에서는 보이지 않을 수도 있지만 존재합니다. CSS의 줄 높이는 무엇입니까

4. 인라인 상자

인라인 상자는 개념일 뿐 표시할 수는 없지만 존재합니다. CSS의 줄 높이는 무엇입니까

높이는 줄 높이입니다

다른 요소의 영향을 받지 않습니다(패딩). 이때 인라인 박스는 콘텐츠 영역
5.라인 박스

라인 박스(line box)와 동일합니다. 인라인 상자와 유사하게 라인 상자는 이 라인의 가상 직사각형 상자를 나타냅니다. 라인 상자의 높이는 라인 높이에 대한 요소의 영향을 받는 모든 요소의 최대 라인 높이와 같습니다. em,strong,span 등과 같은 인라인 요소의 경우 패딩, 여백, border-top, border-bottom은 행 높이를 증가시키지 않습니다. CSS의 줄 높이는 무엇입니까 패딩이 가려지고 여백이 0으로 재설정되고 테두리 하단도 가려집니다.

padding-left, padding-right, border-left 및 border-right를 사용할 수 있습니다.

img 요소는 행 높이에 영향을 미칩니다.
인라인 요소의 패딩, 테두리 및 여백을 설정하면 아래와 같이 외부 요소의 높이가 증가하지 않습니다.

6 행 높이 설정

CSS에서는 line-height 속성을 사용하여 줄 높이를 설정할 수 있습니다. line-height 속성은 선 사이의 거리(선 높이)를 설정하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다.

line-height 속성은 줄 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.
줄 높이와 글꼴 크기(CSS에서는 '줄 간격'이라고 함) 사이의 계산된 차이를 두 부분으로 나누어 텍스트 콘텐츠 줄의 위쪽과 아래쪽에 추가합니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.

예:

<!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>
			这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 在大多数浏览器中默认CSS의 줄 높이는 무엇입니까大约是 110% 到 120%。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。
		</p>

		<p class="small">
			这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。
		</p>

		<p class="big">
			这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。
		</p>

	</body>

</html>

로그인 후 복사

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 CSS의 줄 높이는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!