Line-height 편집

Table of Contents (보이기↓)

edit

개요

이 속성은 요소의 줄높이(행간, 글자 높이)를 지정한다.

line-height와 font-size 값의 차이는 리딩(leading)이하고 하며, 리딩의 절반은 요소의 내용 영역이나 글자 줄의 위와 아래에 동일하게 적용된다.

edit

정의

Line-height설명
값normal | <수치?> | <길이> | <백분율> | inherit
기본값normal
적용대상모든 요소
상속됨
백분율자신의 글꼴 크기 참조
미디어visual

edit

값

값설명
normal기본 크기(1.0~1.2)를 지정한다.
<수치?>단위를 포함하지 않은 수치를 지정한다. 수치에 글꼴 크기 곱해서 line-height가 지정된다.
<길이>길이를 지정한다.
<백분율>백분율(%) 값을 지정한다. 부모 요소를 기준으로 계산된다.
inherit부모 요소의 값을 상속하도록 지정한다.

수치, 길이, 백분율에 음수값을 지정할 수 없다.

edit

예제

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	span {line-height: 1.2; background: yellow;}
</style>
</head>
<body>
	<p>행간의 크기를 지정하지 않으면, 브라우저의 기본 스타일인 1~1,5(대부분 1.2)의 수치로 출력됩니다. 여기서 수치란 글꼴 크기의 배수입니다.</p>
	<p>행간의 크기를 <span>글꼴 크기의 3배</span>로 지정합니다.<p>
	<p>행간은 인라인 박스의 높이가 됩니다.</p>
</body>
</html>

edit

브라우저 호환성

값IE6?IE7?FF2?Op9?
normal지원지원지원지원
(Number)지원지원지원지원
(Length)지원지원지원지원
(Percentage)지원지원지원지원
inherit미지원미지원지원지원

Wiki Trail: < font | 문서 목록 | text-indent >

 
Be Friend~! Be Friend~!