데모-1: 텍스트 행의 베이스라인 사이 간격을 설정합니다. 데모 버튼을 클릭해 보세요!
텍스트의 줄 간격, 즉 행간을 쉽게 조절할 수 있습니다.
<div style="background-color: yellowgreen;">
    <input type="text">
</div>
데모-2: 블록 컨테이너 요소에 적용될 때는 해당 요소 내부 라인 박스의 최소 높이를 지정합니다. 데모 버튼을 클릭해 보세요!
selector {
    line-height: /* value */
}
/* 키워드 값 */
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;
<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>
실제 적용된 모습
<style>
    p {
        background-color: yellowgreen;
        border: 2px solid red;
    }
</style>
<p style="line-height: 500px">
    <!-- 인라인 콘텐츠가 없을 경우 작동하지 않습니다. -->
</p>
실제 적용된 모습
<style>
    p {
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 100px">
    <input type="text" placeholder="인라인 콘텐츠">
</p>
실제 적용된 모습
<style>
    p {
        display: flex;
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 100px">
    <input type="text" placeholder="인라인 콘텐츠">
</p>
<p style="line-height: 100px">
    텍스트
</p>
실제 적용된 모습
line-height 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
line-height 1 12 1 1

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