line-height 속성

line-height 속성은 텍스트 줄 사이의 간격(줄 간격)을 설정합니다.

이 속성은 겉보기와 달리 텍스트 줄 사이의 간격을 직접 지정하는 것이 아니라, 텍스트의 라인 높이를 지정합니다. 이는 실제 줄 사이의 간격이 다음과 같이 계산됨을 의미합니다: line-height - font-size = 텍스트 줄 사이의 거리. 또는 반대로 line-height = font-size + 줄 사이의 거리.

구문

선택자 {
	line-height: 값;
}

값

속성 값으로는 모든 크기 단위를 사용할 수 있습니다. %로 값을 지정하면 줄 간격은 글꼴 크기의 퍼센트가 됩니다.

또한, 0보다 큰 임의의 숫자를 값으로 지정할 수 있습니다. 이 경우 이 숫자는 글꼴 크기의 배수로 해석됩니다. 예를 들어, font-size 값이 20px이고, line-height가 1.5라면, 이는 line-height: 30px로 작성하는 것과 같습니다 (20px * 1.5 = 30px).

기본적으로 속성 값은 normal이며, 이 경우 브라우저가 줄 간격을 자동으로 선택합니다.

예시

이 예시에서 텍스트 줄 사이의 거리는 line-height - font-size = 38px - 18px = 20px가 됩니다:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

예시

간격을 25px - 18px = 7px로 줄입니다:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

예시

이 예시에서 텍스트 줄 사이의 거리는 line-height - font-size = 18px - 18px = 0px 가 되어 줄이 사실상 붙게 됩니다 (윗줄 글자의 꼬리가 아랫줄 글자의 꼬리에 닿게 됨):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

예시

이 예시에서 line-height 값은 글꼴 크기의 1.5 배입니다. 따라서 line-height는 font-size * 1.5 = 18px * 1.5 = 27px와 동일합니다. 실제 줄 사이의 간격은 line-height - font-size = 27px - 18px = 9px가 됩니다:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

예시

배수를 증가시킵니다:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

예시

line-height를 font-size보다 작게 만들면 줄들이 서로 완전히 겹치게 됩니다:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}