개체 속에서 글자와 글자 사이의 추가적인 거리를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체 속에서 글자와 글자 사이의 추가적인 거리를 나타내는 문자열이다.

normal 디폴트이며, 디폴트 간격이다.
(길이) 부동소수점수치 다음에 cm, mm, in, pt, pcpx 등 길이 단위가 따르는 절대 길이, 혹은 em or ex 등의 단위가 따르는 상대 길이이다. CSS 길이단위를 참조하라.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 normal이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속된다.

특기

길이 값이 양수이면, letter-spacing 애트리뷰트는 엘레멘트 속에서 지정된 값을 글자와 글자 디폴트 간격에 추가한다. 값이 음수이면 디폴트 간격이 그만큼 줄어든다. 글자 간격은 정렬에 의하여 영향을 받을 수 있다.

적용
개체scriptCSS IE 버전
참조

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.


지정된 글자 간격이 적용된다.
<STYLE>button{width:50}</STYLE>
<DIV id=divObj style="letter-spacding:1em;">지정된 글자 간격이 적용된다.</DIV>
<BUTTON onclick="divObj.style.letterSpacing='';">디폴트</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='-.2em';">-.2em</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='.2em';">.2em</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='1em';">1em</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='-10px';">-10px</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='-5px';">-5px</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='1px';">1px</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='5px';">5px</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='10px';">10px</BUTTON>
<BUTTON onclick="divObj.style.letterSpacing='10pt';">10pt</BUTTON>

여기에 마우스를 올려보라.

onmouseover 이벤트로 글자간격을 조정한다.

<DIV onmouseover="this.style.letterSpacing='3mm';" onmouseout="this.style.letterSpacing='';">여기에 마우스를 올려보라.</DIV>