line-height

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

line-height 는 줄간격을 조절합니다.

예제 1
px 단위로 조절하는 예제
보기
CSS 공작소
CSS 공작소
CSS 공작소
line-height : 30px
CSS 공작소
CSS 공작소
CSS 공작소
line-height : 60px
소스
<style type="text/css">
    .css_test {
        border : 3px solid gray;
        box-shadow : 0 0 5px silver inset;
        border-radius : 5px;
    }
</style>

<div class="css_test" style="line-height:30px;">
    CSS 공작소<br>
    CSS 공작소<br>
    CSS 공작소<br>
    <b>line-height : 30px</b>
</div>
<div class="css_test" style="line-height:60px;">
    CSS 공작소<br>
    CSS 공작소<br>
    CSS 공작소<br>
    <b>line-height : 60px</b>
</div>
사용된 CSS (클릭시 보기) : borderborder-radiusbox-shadowline-height
예제 2
실습 - px 단위로 조절해 보기
보기
CSS 공작소
CSS 공작소
CSS 공작소
line-height :
20px
 
CSS 공작소
예제 3
실습 - % 단위로 조절해 보기
보기
CSS 공작소
CSS 공작소
CSS 공작소
line-height :
20px
 
CSS 공작소
연구 1
실습 - px 단위일때 폰트크기에 따라 어떻게 변하는지 보기
보기
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
line-height :
10px
 
CSS 공작소
설명
- px 단위로 입력하면 폰트크기에 상관없이 일정하게 줄간격이 설정됩니다.
연구 2
실습 - % 단위일때 폰트크기에 따라 어떻게 변하는지 보기
보기
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
CSS 공작소
CSS 공작왕
CSS 공장장
line-height :
100%
 
CSS 공작소
설명
- % 단위로 입력하면 폰트크기에 맞춰서 상대적으로 줄간격이 설정됩니다.