Line - Height
개요 : 이 속성은 요소의 줄높이(행간, 글자 높이)를 지정한다.
line-height와 font-size 값의 차이는 리딩(leading)이하고 하며, 리딩의 절반은 요소의 내용 영역이나 글자 줄의 위와 아래에 동일하게 적용된다.
정의
|
line-height |
설명 |
|
값 |
normal | <수치> | <길이> | <백분율> | inherit |
|
기본값 |
normal |
|
적용대상 |
모든 요소 |
|
상속 |
됨 |
|
백분율 |
자신의 글꼴 크기 참조 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
normal |
기본 크기(1.0~1.2) 를 지정한다. |
|
<수치> |
단위를 포함하지 않은 수치를 지정한다. 수치에 글꼴 크기 곱해서 line-height가 지정된다. |
|
<길이> |
길이를 지정한다. |
|
<백분율> |
백분율 (%) 값을 지정한다. 부모 요소를 기준으로 계산된다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
수치, 길이, 백분율에 음수값을 지정할 수 없다.
-------------------------------------------------------------------------------------------------------
예제
View Source :
<style>
span {line-height: 1.2; background: yellow;}
</style>
<body>
<p>행간의 크기를 지정하지 않으면, 브라우저의 기본 스타일인 1~1,5(대부분 1.2)의 수치로 출력됩니다. 여기서 수치란 글꼴 크기의 배수입니다.</p>
<p>행간의 크기를 <span>글꼴 크기의 3배</span>로 지정합니다.<p>
<p>행간은 인라인 박스의 높이가 됩니다.</p>
</body>
Result :
''.' Programs > CSS' 카테고리의 다른 글
| Font-Stretch (0) | 2012.03.20 |
|---|---|
| Font (0) | 2012.03.20 |
| Text-Indent (0) | 2012.03.20 |
| Text-Align (0) | 2012.03.20 |
| White-Space (0) | 2012.03.20 |