CSS line-height 속성

정의와 사용법

line-height 속성은 행 간의 거리를 설정합니다（행 높이）.

주석:부정적인 값을 사용할 수 없습니다.

설명

이 속성은 행 프레임 레이아웃에 영향을 미칩니다. 블록 요소에 적용될 때, 이 속성은 요소 내에서 기본선 간의 최소 거리를 정의합니다. 이는 최대 거리가 아닙니다.

line-height와 font-size의 계산 값의 차이（CSS에서 '행 간격'으로 알려짐）은 두 부분으로 나뉘어, 각각 텍스트 행 내용의 상단과 하단에 추가됩니다. 이 내용을 포함할 수 있는 가장 작은 프레임은 행 프레임입니다.

원래 숫자 값은 확대 인자를 지정하며, 자손 요소는 계산 값 대신 이 확대 인자를 상속합니다.

추가로 참조:

CSS 강의:CSS 텍스트

HTML DOM 참조 가이드:lineHeight 속성

예제

퍼센트로 행 높이 설정:

p.small {line-height:90%}
p.big {line-height:200%}

직접 시도해보세요

（더 많은 예제는 페이지 하단에서 확인할 수 있습니다）

CSS 문법

line-height: normal|number|length|initial|inherit;

속성 값

값 설명
normal 기본. 적절한 행 간격을 설정.
number 숫자를 설정합니다. 이 숫자는 현재 글꼴 크기와 곱하여 행 간격을 설정합니다.
length 고정된 행 간격을 설정.
% 현재 글꼴 크기 기반 퍼센트 행 간격.
inherit 부모 요소에서 line-height 속성 값을 상속해야 합니다.

기술 세부 사항

기본 값: normal
상속성: yes
버전: CSS1
JavaScript 문법: object.style.lineHeight="2"

TIY 예제

퍼센트로 행 간격 설정
이 예제에서는 퍼센트 값을 사용하여 문단의 행 간격을 설정하는 방법을 보여줍니다.
픽셀 값으로 행 간격 설정
이 예제에서는 픽셀 값을 사용하여 문단의 행 간격을 설정하는 방법을 보여줍니다.
수치를 사용하여 행 간격을 설정
이 예제에서는 수치를 사용하여 문단의 행 간격을 설정하는 방법을 보여줍니다.

브라우저 지원

표에서의 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari 오페라
1.0 4.0 1.0 1.0 7.0