CSS / Reference / line-height

line-height는 텍스트 한 줄의 줄 상자 높이를 정합니다. 단위 없는 숫자 1.6을 지정하면 해당 요소의 글자 크기에 비례하며, 자식의 글자 크기가 달라지는 구조에서도 고정 px보다 자연스럽게 상속됩니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

body { font-size: 1rem; line-height: 1.6; }
.heading { line-height: 1.3; }

값과 적용 조건은 MDN line-height에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 line-height-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>line-height 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 260px; font-size: 20px; border: 1px solid #718096; }
.target { line-height: 1.6; }
.reference { line-height: 1; }
</style>
</head>
<body>
<main id="demo">
<h1>line-height 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">line-height: 1.6</p><div class="target">줄 높이를 비교하는 문장입니다.<br>두 번째 줄도 같은 글자 크기입니다.<br>세 번째 줄을 확인하세요.</div></div><div class="b"><p class="label">line-height: 1</p><div class="reference">줄 높이를 비교하는 문장입니다.<br>두 번째 줄도 같은 글자 크기입니다.<br>세 번째 줄을 확인하세요.</div></div></section>
</main>
</body>
</html>

글자 크기가 20px인 첫 박스는 줄 높이가 32px입니다. 두 번째 박스는 줄 사이 여유가 줄어들며 글꼴의 실제 글자 모양에 따라 위아래가 가까워 보일 수 있습니다.

단위 없는 숫자와 상속

line-height: 1.6은 비율 자체가 상속되어 자식의 글자 크기에 맞춰 계산됩니다. 반면 px나 em, 백분율로 계산된 길이가 상속되면 자식 글자가 커져도 줄 높이가 그에 비례하지 않을 수 있습니다. 큰 제목을 포함한 상위 컨테이너에는 이 차이가 중요합니다.

줄 높이는 문단 여백과 다릅니다

line-height는 줄 안의 높이이며 문단 사이의 margin을 직접 정하지 않습니다. 한 줄 텍스트를 고정 높이로 가운데 맞추는 방식은 여러 줄이 되면 깨질 수 있으므로 구성 요소 정렬에는 flex나 grid를 검토하세요. 본문에서는 사용자 글자 확대와 실제 한글·영문 혼합 내용으로 읽기 편한지 확인합니다.

상속되는 비율과 길이 비교

다음 전체 문서를 css-reference-10639-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>상속되는 비율과 길이 비교</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.parent { font-size:20px;background:#e6f2ff;padding:8px;margin-bottom:20px; } .ratio {line-height:1.6;} .fixed {line-height:32px;} .child {font-size:30px;}
  </style>
</head>
<body>
<main>
  <h1>상속되는 비율과 길이 비교</h1>
<p>line-height: 1.6</p><div class="parent ratio">부모 글자 20px<div class="child">자식 글자 30px</div></div><p>line-height: 32px</p><div class="parent fixed">부모 글자 20px<div class="child">자식 글자 30px</div></div>
</main>
</body>
</html>

두 부모의 계산값은 32px이지만 자식은 비율 쪽이 48px, 고정 길이 쪽이 32px입니다. 비율은 숫자가 상속되어 자식 글자 크기에 다시 곱해집니다. .child만 40px로 바꾸면 64px·32px인지 확인한 뒤 복구하세요. 인라인 이미지 등 다른 내용 때문에 실제 줄 상자가 더 커질 수 있으므로 CSS 계산값과 문단 전체 높이를 구분합니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 font-size입니다.

적용되지 않거나 예상과 다를 때

• 줄이 겹치면 고정 line-height가 큰 자식 글자에 상속되는지 확인합니다.
• 줄은 괜찮지만 문단 간격이 크면 p 요소의 margin을 따로 확인합니다.