[text] CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 = 글씨 수직중앙정렬 = 라인하이트속성, 상속O)

1. line-height 예제 - 가능값 종류
2. line-height 정의
3. line-height 구문
4. line-height 예제 - 라인 중단 정렬

line-height 예제 - 가능값 종류

 

<style>

 * {padding:0 20px;}

div {line-height: 30px; color:black; border:1px solid dimgray; }

 

.normal {line-height: normal; color:red; border:1px solid dimgray; }

.number {line-height: 2; color:blue; border:1px solid dimgray; }

.length {line-height: 70px; color:green; border:1px solid dimgray; }

.pro {line-height: 300%; color:magenta; border:1px solid dimgray; }

.inherit {line-height: inherit; color:black; border:1px solid dimgray; }

</style> 

 

<div>부모 요소 홈짱닷컴 (homzzang.com)

  <p class="normal">normal : 홈짱닷컴 (homzzang.com)</p>

  <p class="number">2 : 홈짱닷컴 (homzzang.com)</p>

  <p class="length">70px : 홈짱닷컴 (homzzang.com)</p>

  <p class="pro">300% : 홈짱닷컴 (homzzang.com)</p>

  <p class="inherit">inherit : 홈짱닷컴 (homzzang.com)</p>

</div>

결과보기

line-height 정의

 

텍스트 라인높이 (= 텍스트줄높이) 지정.

 

---

 

1.

기본값 : normal

상속여부 : O

애니효과 : O

CSS버전 : CSS1

JS구문 : object.style.lineHeight="30px"

 

2.

음수는 비허용.

3.
인라인 요소 수직중앙정렬에 유용.

4.

height 값 없이 line-height값만 지정한 경우,

IE11 및 하위브라우저에서 제대로 작동 안 함.

5.

모든 브라우저 지원.

 

line-height 구문

 

selector {line-height: 속성값;}

 

---

[속성값 종류]

 

normal
기본 간격 (기본값)

 

숫자  ★
숫자 X  폰트 크기  =  줄 간격

 

px, pt, cm 등의 길이 단위
숫자 클수록 간격 넓어짐 (음수 불가능)

 

% 단위 ★
폰트 크기의 % (백분율)

initial

이 속성의 기본값으로 설정.

inherit
부모 요소의 속성값을 상속

 

line-height 예제 - 라인 중단 정렬

 

style>
div {margin:0 auto; width:400px; height: 100px  !important; line-height:100px  !important; font-size:20px; font-weight:bold; text-align:center; border:1px solid red; }
</style>

<div>홈짱닷컴 (www.homzzang.com)</div>

결과보기 

line-height 예제 - 이미지와 텍스트 높이 수직 균등 정렬

 

<style>

#hz {overflow:auto;}

#hz img {float:left;}

#hz a {float:left; height:50px; line-height:50px;}

</style>

<div id="hz">

    <img src="https://i.imgur.com/PQNhCln.gif"><a href="#">홈짱닷컴 Homzzang.com</a>

</div>

 

결과보기