Blogger 꾸미기 : html , css 줄간격과 글자간격(자간) 조절하는 방법

html / css 글자간격(자간), 줄간격 조절하기

글자의 간격과 줄간격을 조절하는 키워드는 여러가 있습니다.

① letter-spacing : 글자 사이 간격 (자간)

② word-spacing : 단어 사이 간격

③ line-height : 줄 사이 간격



※ td, div, span 등에서 사용가능하며 단위는 px, %, em 모두 사용가능

• 값이 커지면 간격이 커집니다.
• 값에는 음수 가능합니다.
• 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

글자간격의 조절

- letter-spacing : 글자간의 간격 조절
- word-spacing : 단어간의 간격 조절


지정하는 단위는 %, px, em 등 모두 가능

글자간격 조절의 예

테이블 셀의 글자간격을 10px로 조절

<table>

<tr>

<td style='letter-spacing:10px'>

abcde

</td>

</tr>

</table>

줄간격의 조절

line-height : 줄과 줄의 간격, 보통은 % 단위로 지정

줄간격 조절의 예

줄간격을 200%로 지정합니다.

<div style='line-height:200%'>

abcde<br>

dddddd

</div>