CSS에서 단위 없는 line-height 값

line-height 속성의 값은 반드시 특정 단위를 가진 숫자일 필요는 없습니다. 단순히 숫자나 분수를 적을 수도 있습니다. 이 경우 실제 line-height 값은 이 숫자에 font-size 값을 곱하여 구할 수 있습니다.

예를 들어, font-size가 10px이고, line-height가 1.5라면, line-height의 실제 값은 10px * 1.5 = 15px가 됩니다. 그러면 텍스트 줄 사이의 보이는 흰색 간격은 5px가 될 것입니다: 15px - 10px = 5px.

이렇게 line-height를 지정하는 방법의 장점은 글꼴 크기를 변경할 때 줄 간격도 자동으로 조정된다는 점입니다.

설명한 내용을 예제를 통해 확인해 보겠습니다:

<p>
	some long text
</p>

p {
	font-size: 20px;
	line-height: 1.5;
	text-align: justify;
	width: 400px;
}

단락의 글꼴 크기가 30px라고 가정합니다. 단락 사이의 보이는 흰색 간격이 15px가 되도록 line-height 속성을 설정하세요. 이를 위해 단위 없는 line-height 값을 사용하십시오.