• Q&A
  • 회원가입
  • 로그인

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

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>

 

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>

결과보기 

height 값과 동일하게  line-height 값 준 후, 다른 곳 영향 안 받게 !important 붙여주면 끝 !!
단, 
되도록이면 CSS 흐름에 맞에 CSS 정의해 !important 사용 안 하는 게 최선. 
 
오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012