행 높이를 나타내는 CSS 속성은 무엇입니까?-프런트엔드 Q&A-php.cn

행 높이를 나타내는 CSS 속성은 무엇입니까?

青灯夜游

풀어 주다： 2021-07-05 17:45:15

원래의

2562명이 탐색했습니다.

줄 높이를 나타내는 CSS 속성은 줄 사이의 거리(줄 높이)를 설정할 수 있습니다. 구문은 "line-height: value;"입니다. 블록 수준 요소에 적용될 때 line-height 속성은 최대 거리가 아닌 요소의 기준선 간 최소 거리를 정의합니다.

행 높이를 나타내는 CSS 속성은 무엇입니까?

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

줄 높이를 나타내는 CSS 속성은 line-height입니다.

line-height 속성은 줄 사이의 거리(줄 높이)를 설정할 수 있습니다. 음수 값은 허용되지 않습니다.

line-height 속성은 줄 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.

줄 높이와 글꼴 크기(CSS에서는 '줄 간격'이라고 함) 사이의 계산된 차이를 두 부분으로 나누어 텍스트 콘텐츠 줄의 위쪽과 아래쪽에 추가합니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.

line-height 속성으로 설정할 수 있는 속성 값:

값	설명
normal	default. 적당한 줄 간격을 설정하세요.
number	숫자를 설정하세요. 숫자에 현재 글꼴 크기를 곱하여 줄 간격을 설정하세요.
length	고정된 줄 간격을 설정하세요.
%	현재 글꼴 크기를 기준으로 한 줄 간격의 비율입니다.
inherit	은 line-height 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

예:

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
}
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>

<p>
这是一个标准行高的段落。
浏览器的默认行高为“1”。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>

<p class="small">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>

<p class="big">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>

</body>
</html>

로그인 후 복사

렌더링:

행 높이를 나타내는 CSS 속성은 무엇입니까?