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 :
17.PNG?type=w1