line-height 속성의 이해

line-height 속성은
텍스트 행의 높이를 설정합니다. 텍스트의 위/아래 가운데를 기준으로 위/아래로 길어지거나 짧아집니다.
이러한 특징을 이용하면 텍스트의 줄 간격, 즉 행간을 쉽게 조절할 수 있습니다.

line-height 속성의 이러한 특징으로 인해서 텍스트의 행간 높이 설정과 내부 라인 박스(line box)의 최소 높이를 지정하는 두 가지 효과가 있습니다.

텍스트의 행간 높이를 설정

텍스트의 행간 높이를 설정합니다.

데모-1: 텍스트 행간의 높이을 설정합니다. 데모 버튼을 클릭해 보세요!
텍스트의 줄 간격, 즉 행간을 쉽게 조절할 수 있습니다.

라인 박스의 최소 높이를 지정

이 속성이 블록 컨테이너 요소에 적용될 때는 해당 요소 내부 라인 박스(line box)의 최소 높이를 지정합니다.

라인 박스(line box)란
블록 컨테이너 요소 내부에 수평으로 된 가상의 공간을 의미하며 인라인 콘텐츠(예: 텍스트, 이미지, 링크, input 등)가 렌더링되는 공간을 말합니다.

단, flex나 grid 박스 컨테이너에 적용될 때에는 텍스트 콘텐츠만이 해당 요소 내부 라인 박스의 최소 높이를 지정합니다.

데모-2: HTML 
<div style="background-color: yellowgreen;">
    <input type="text">
</div>
데모-2: 블록 컨테이너 요소에 적용될 때는 해당 요소 내부 라인 박스의 최소 높이를 지정합니다. 데모 버튼을 클릭해 보세요!

line-height 속성의 형식은 다음과 같습니다.

구문

CSS 
selector {
    line-height: /* value */
}

값

line-height 속성의 값
초깃값 normal
적용 요소 모든 요소
상속 예
퍼센트(%) 단위 값 요소 자체의 폰트 크기를 참조합니다.
애니메이션 길이 단위가 있는 값에만 적용됩니다.
CSS line-height 속성 값 예시 
/* 키워드 값 */
line-height: normal;

/* 숫자 값 */
line-height: 1.5; /* 현재 font-size의 1.5배의 크기 */

/* % 단위 값 */
line-height: 150%; /* 현재 font-size의 150%의 크기 */

/* 길이 단위 값 */
line-height: 28px;
line-height: 2.5em;

/* font 단축 표현 속성 */
font: 25px/1.5 arial, sans-serif; /* line-height는 1.5 */

/* 글로벌 값 */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;

주의할 점

  • 숫자 값이나 퍼센트(%) 단위 값의 기준은 현재 요소의 font-size입니다.
  • 애니메이션은 길이 단위가 있는 값에만 적용됩니다.

line-height 속성의 작동 방식

단순하게 line-height 속성의 작동 방식을 텍스트의 줄 간격, 즉 행간을 조절한다고만 이해하는 것은 잘못된 것입니다.

line-height 속성은 블록 요소 내의 라인 박스 높이를 설정하는 것입니다.
이 속성의 이름이 'line height'라는 것에 주목하세요. 앞서 설명했듯이 라인 박스는 블록 컨테이너 요소 내부의 수평으로 된 가상의 공간으로 텍스트나 이미지, input 등 인라인 콘텐츠(콘텐츠의 앞이나 뒤를 강제로 줄바꿈하는 성격이 없는 콘텐츠)가 렌더링되는 공간을 의미합니다.

따라서, line-height 속성은 텍스트의 줄 간격, 즉 행간을 조절하는 것 이외에도 인라인 콘텐츠의 최소 높이도 조절할 수 있습니다. 또한, line-height 속성은 높이 조절을 할 때 인라인 콘텐츠의 위/아래 가운데를 기준으로 위/아래로 길어지거나 짧아집니다.

다음의 세 가지 예시들을 통해 차근차근 살펴보겠습니다.

line-height 속성은 높이 조절을 할 때 인라인 콘텐츠의 위/아래 가운데를 기준으로 합니다.

HTML 
<style>
    p {
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 500%">
    이 텍스트는 line-height가 500%입니다.
</p>
<p style="line-height: 100px">
    이 텍스트는 line-height가 100px입니다.
</p>
<p style="line-height: 5px">
    이 텍스트는 line-height가 5px입니다.
</p>
실제 적용된 모습

위 예시들을 보면 알 수 있듯이 line-height 속성은 높이 조절을 할 때 인라인 콘텐츠의 위/아래 가운데를 기준으로 합니다.

line-height 속성은 텍스트 세로 기준으로 가운데 정렬하는데 유용합니다.

line-height 속성은 인라인 콘텐츠가 없을 경우 작동하지 않습니다.

HTML 
<style>
    p {
        background-color: yellowgreen;
        border: 2px solid red;
    }
</style>
<p style="line-height: 500px">
    <!-- 인라인 콘텐츠가 없을 경우 작동하지 않습니다. -->
</p>
실제 적용된 모습

위 예시를 보면 line-height 속성은 인라인 콘텐츠가 없을 경우 작동하지 않습니다. 이것은 당연한 것입니다. line-height 속성은 해당 요소의 높이를 지정하는 것이 아니라 블록 요소 내 라인 박스 높이를 설정하는 것이기 때문입니다. 라인 박스는 인라인 콘텐츠가 없을 경우 생성되지 않습니다.

line-height 속성은 텍스트에만 적용되는 것이 아니라 인라인 콘텐츠에도 적용됩니다.

HTML 
<style>
    p {
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 100px">
    <input type="text" placeholder="인라인 콘텐츠">
</p>
실제 적용된 모습

위 예시를 보면 알 수 있듯이 line-height 속성은 텍스트에만 적용되는 것이 아니라 인라인 콘텐츠에도 적용됩니다.

line-height 속성은 텍스트 행의 높이를 설정하지만 이는 line-height 속성이 라인 박스의 최소 높이를 설정하는 것의 효과이기 때문입니다.

하지만, flex나 grid 박스에서는 별개로 작동합니다.

HTML 
<style>
    p {
        display: flex;
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 100px">
    <input type="text" placeholder="인라인 콘텐츠">
</p>
<p style="line-height: 100px">
    텍스트
</p>
실제 적용된 모습

위 코드 예시를 보면 flex 박스 내에서 인라인 콘텐츠는 작동하지 않습니다. 하지만 텍스트 콘텐츠에서는 작동합니다.

브라우저 호환성

line-height 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
line-height 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

line-height 속성의 명세서 사양
명세서 사양
line-height CSS Inline Layout Module Level 3
#line-height-property

참고문헌

같이 보기