줄 높이

클래스

leading-<name>은 line-height만 설정합니다. 글꼴 크기를 바꾸거나 문단 사이에 간격을 추가하거나 문단 높이를 제한하지 않습니다.

값

프리셋 값 다섯 개는 모두 단위 없는 비율이며 rem 길이나 픽셀 수가 아닙니다. 실제 줄 높이는 요소의 글꼴 크기에 따라 결정됩니다.

상속한 비율은 각 글꼴 크기를 따릅니다

leading-md는 숫자 1.6을 제공합니다. 이를 상속한 자식은 자신의 글꼴 크기를 사용하므로 16px에서는 25.6px, 24px에서는 38.4px가 됩니다. 상속되는 값은 여전히 비율입니다.

자식들은 단위 없는 1.6을 상속하고 서로 다른 글꼴 크기를 사용합니다. 옅은 색 띠는 글리프 사이의 빈 공간이 아니라 전체 줄 상자를 보여 줍니다. 두 열의 너비는 같습니다.

텍스트 설명

1. 공통 부모는 프리셋 값이 숫자 1.6인 leading-md를 사용합니다.
2. 첫 번째 자식은 루트 글꼴 크기가 16px일 때 font-md를 사용하므로 텍스트는 16px, 줄 높이는 25.6px가 됩니다.
3. 두 번째 자식은 font-2xl을 사용하므로 텍스트는 24px, 줄 높이는 38.4px가 됩니다. 고정된 25.6px 길이가 아니라 같은 비율을 상속합니다.
4. 각 열에는 같은 세 줄이 들어 있습니다. 색 띠는 전체 줄 상자를 확인하기 위한 주석이며 leading-md가 생성하는 padding이나 gap이 아닙니다.

명시적인 길이나 백분율은 상속 방식이 다릅니다. 선언된 요소에서 길이로 계산됩니다. 사용자 지정 비율에는 (line-height:1.5) 같은 네이티브 선언을 사용하거나 테마 토큰을 추가하세요. 프리셋에는 leading(1.5) 함수가 없습니다.

줄 높이는 보이는 글리프 사이의 빈 공간이 아니라 줄의 세로 치수를 제어합니다. 다른 인라인 콘텐츠 때문에 줄 상자가 더 높아질 수 있습니다. 글리프를 잘라 내거나 문단 높이를 고정하지는 않습니다.

text-* 텍스트 스타일은 자체 줄 높이를 설정하므로 상속한 비율을 대체합니다. 이 스타일을 의도적으로 덮어쓰려면 같은 요소에 leading-*를 적용하세요. 조건이 같으면 단일 속성 유틸리티가 조합 스타일 뒤에 옵니다.

관련 문서: 텍스트 스타일의 보조 토큰, 네이티브 line-height 상속.

사용 예

부모에 비율을 설정하고 자식이 각자의 글꼴 크기로 줄 높이를 계산하게 합니다.

<div class="… leading-md">  <p class="… font-sm">The same ratio follows this…</p>  <p class="… font-lg">The same ratio follows this…</p></div>

@layer theme {  :root,  :host {    --leading-md: 1.6;    --font-size-sm: .875rem;    --font-size-lg: 1.125rem  }}@layer utilities {  .font-lg {    font-size: var(--font-size-lg)  }  .font-sm {    font-size: var(--font-size-sm)  }  .leading-md {    line-height: var(--leading-md)  }}

사용자 정의

프리셋 값을 변경하거나 토큰을 추가하세요. --leading-prose를 정의하면 leading-prose가 생성됩니다.

@theme {  --leading-prose: 1.7;}

@layer theme {  :root,  :host {    --leading-prose: 1.7  }}@layer utilities {  .leading-prose {    line-height: var(--leading-prose)  }}

관련 문서: 테마 지시문, 타이포그래피.