CSS 기본 지침

CSS 상자 모델

CSS3기본 가이드

CSS 참조 가이드

CSS @규칙(RULES)

CSS 수직-align(수직 정렬)CSS 속성 선택자

CSS line-height(라인 높이)

CSS line-height 줄 간격 속성사용됩니다요소에서 정의된 라인 박스의 최소 높이그것은 내용의 두 줄 간의 간격을 설정합니다.

그것은 인라인 요소 위와 아래의 공간량을 정의합니다. 그것은 글꼴 크기에 독립적으로 라인 높이를 설정할 수 있게 합니다.

CSS 라인 높이 값

line-height 속성 값은 CSS line-height 속성을 함께 사용해야 합니다.

값	설명
normal	이것은 기본 값입니다. 정상 높이를 지정합니다.
number	그것은 숫자를 지정하며, 이 숫자는 현재 글꼴 크기와 곱하여 라인 높이를 설정합니다.
length	그것은 px, pt, cm 등으로 라인 높이를 설정하는 데 사용됩니다.
%	그것은 현재 글꼴의 백분율로 라인 높이를 지정합니다.
initial	그것은 이 속성을 기본 값으로 설정합니다.
inherit	그것은 부모 요소에서 이 속성을 상속받습니다.

CSS 라인 높이 예제

예제

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
h3.small　{　　
　　　　line-height:　70％;　　
}　　
h3.big　{　　
　　　　line-height:　200％;　　
}　　
</style>　　
</head>　　
<body>　　
<h3>　　
이것은 기본 표준 줄 간격을 가진 제목입니다.<br>　　
이것은 기본 표준 줄 간격을 가진 제목입니다.<br>　　
대부분의 브라우저에서 기본 줄 간격은 약110％부터120％.<br>　　
</h3>　　
<h3　class="small">　　
이것은 작은 줄 간격을 가진 제목입니다.<br>　　
이것은 작은 줄 간격을 가진 제목입니다.<br>　　
이것은 작은 줄 간격을 가진 제목입니다.<br>　　
이것은 작은 줄 간격을 가진 제목입니다.<br>　　
</h3>　　
<h3　class="big">　　
이것은 큰 줄 간격을 가진 제목입니다.<br>　　
이것은 큰 줄 간격을 가진 제목입니다.<br>　　
이것은 큰 줄 간격을 가진 제목입니다.<br>　　
이것은 큰 줄 간격을 가진 제목입니다.<br>　　
</h3>　　
</body>　　
</html>

테스트를 보자‹/›

CSS 수직-align(수직 정렬)CSS 속성 선택자