CSS line-height: 줄 높이
Baseline넓은 지원
모든 주요 브라우저가 지원하는 기능입니다.
CSS line-height 속성은 가로쓰기에서는 줄 상자의 높이를, 세로쓰기에서는 줄 상자의 너비를 설정하며, 주로 줄의 간격을 조정할 때 사용합니다.
p {
line-height: normal;
/* line-height: 2; */
/* line-height: 40px; */
/* line-height: 300%; */
}p {
width: 200px;
word-break: keep-all;
}<p>내가 여기에 와서 돈 한푼 안 받고 일하기를 삼 년 하고 꼬박이 일곱 달 동안을 했다. 그런데도 미처 못 자랐다니까 이 키는 언제야 자라는 겐지 짜장 영문 모른다.</p>불러오는 중...
구문
selector {
/* 키워드 값 */
line-height: normal;
/* 단위 없는 숫자 값 */
line-height: 3.5;
/* <length> 값 */
line-height: 3em;
/* <percentage> 값 */
line-height: 34%;
/* 전역 값 */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;
}line-height 속성에는 한 개의 <number>, <length>, <percentage>, 또는 키워드 normal을 사용합니다.
값
normal정확한 값은 사용자 에이전트와 글꼴마다 다를 수 있습니다. 보통, 데스크톱 브라우저에서는 대략
1.2정도의 값과 같습니다.<number>(단위 없는 숫자)줄 높이를 글꼴 크기에 이 숫자를 곱한 크기로 설정합니다. 계산 값은 변하지 않고 지정한 숫자 값을 그대로 유지합니다.
<length>와<percentage>값은 상속에 의해 예상을 벗어나는 동작을 보일 수 있으므로, 일반적으로line-height에는 단위 없는 숫자 값을 사용하는 걸 추천합니다.
접근성
주 텍스트 콘텐츠의 line-height에 1.5 미만의 값을 설정하면 저시력 사용자나, 난독증 등 인지력 저하를 겪는 사용자가 읽기 어려울 수 있습니다.
line-height에 절대 길이 단위의 값을 지정 시, 사용자가 브라우저 글씨 크기를 조정해도 줄 높이가 변하지 않아 읽기 어려워질 수 있습니다. 불가피한 이유가 없으면 단위 없는 숫자 값을 사용하세요.
예제
단위 없는 숫자를 사용해야 할 이유
<length>와 <percentage>보다 단위 없는 <number> 값이 적합한 이유를 보이는 예제입니다. 초록 테두리 <div> 요소는 line-height: 1.1, 빨간 테두리 <div> 요소는 line-height: 1.1em입니다.
.green {
border: 1px solid limegreen;
line-height: 1.1;
}
.red {
border: 1px solid red;
line-height: 1.1em;
}
h1 {
font-size: 24px;
margin-top: 0;
}
.box {
font-size: 15px;
display: inline-block;
vertical-align: top;
width: 200px;
word-break: keep-all;
}<div class="box green">
<h1>단위 없는 line-height를 써야 결과가 예상을 벗어나지 않아요.</h1>
길이와 백분율 값은 상속 결과가 이상할 수 있어요.
</div>
<div class="box red">
<h1>단위 없는 line-height를 써야 결과가 예상을 벗어나지 않아요.</h1>
길이와 백분율 값은 상속 결과가 이상할 수 있어요.
</div>불러오는 중...
얼핏 생각해 보면 1.1em과 1.1 모두 요소 글씨 크기의 110%와 같은 길이가 되니 두 결과가 같아야 할 것 같지만 실제 결과는 다른 걸 확인할 수 있습니다.
line-height를 .box에 지정했으므로, 빨간 상자의 줄 높이 계산 값은 .box의 글씨 크기에 상대적인 15px * 1.1 = 16.5px이 됩니다. 이 값은 <h1> 요소로 상속되는데, <h1>의 글씨 크기는 24px이므로 줄 높이보다 글씨 크기가 크고, 따라서 출력 결과처럼 글씨가 겹치게 됩니다.
반면 단위 없는 숫자 1.1의 경우 상속되는 계산 값도 1.1로 유지되므로, <h1>의 줄 높이도 기대하는 결과인 24px * 1.1 = 26.4px이 됩니다.
세로쓰기
세로쓰기 요소에서는 줄 상자의 너비를 설정합니다.
p {
border: 1px dotted black;
display: inline-block;
writing-mode: vertical-rl;
}
.wide {
line-height: 2;
}<p>돌담에 소색이는 햇발가치<br>풀아래 우슴짓는 샘물가치</p>
<p class="wide">돌담에 소색이는 햇발가치<br>풀아래 우슴짓는 샘물가치</p>불러오는 중...
명세
브라우저 호환성
| 데스크톱 | 모바일 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||||
| Safari | Chrome | Firefox | Safari | Safari WebView | Chrome | Android WebView | Firefox | Samsung Internet | |
line-height | |||||||||
normal | |||||||||