CSS word-spacing 속성 – 올바른 이해와 사용 방법

`word-spacing` 속성의 이해

word-spacing 속성은
특정 요소 안에 있는 텍스트의 단어와 단어 사이 공백 간격이나,
인라인 요소와 인라인 요소 사이의 공백 간격을 조절하는 속성입니다.

양수 값이면 간격이 넓어지고, 음수 값이면 간격이 좁아집니다.

CSS 데모로 확인하기

단어와 단어 사이 공백 간격 조절

특정 요소 안에 있는 텍스트의 단어와 단어 사이 공백 간격을 늘리거나 줄입니다.

CSS rem과 em 단위

인라인 요소와 인라인 요소 사이의 공백 간격 조절

인라인 요소(Inline Element)란
HTML 문서에서 다른 요소 안에 삽입되어 사용되며, 텍스트의 일부로 간주되어 줄 바꿈 없이 표시되는 요소입니다.

특정 요소 안에 있는 인라인 요소와 인라인 요소가 편집기를 기준으로 줄바꿈해서 마크업되면, 마치 텍스트처럼 한 번 띄어쓰기를 한 것과 같이 공백이 생기게 됩니다.

이러한 인라인 요소와 인라인 요소 사이의 공백 간격을 늘리거나 줄입니다.

HTML

<div>
    <button>인라인 요소</button>
    <button>인라인 요소</button> <!-- 이 전 요소와 줄바꿈해서 마크업되면 공백이 생깁니다. -->
</div>

word-spacing 속성의 형식은 다음과 같습니다.

구문

정의

word-spacing 속성의 정의
초깃값	`normal`
적용 요소	모든 요소
상속	예
애니메이션	예

값

word-spacing 속성의 값
`normal`	현재 글꼴의 일반 단어 간격입니다. 즉, 간격이 퍼지게 하거나 더 가깝게 추가 간격이 적용되지 않습니다. 길이 단위로는 `0`으로 계산됩니다.
`length`	길이 단위 값입니다. (양수, `0`, 음수 적용 가능)
`percentage`	퍼센트(`%`) 단위 값입니다. 일부 브라우저에서만 지원합니다. 브라우저 호환성을 참조하세요.

CSS

/* 키워드 값 */
word-spacing: normal;

/* length(길이 단위) 값 */
word-spacing: 0; /* normal과 동일 */
word-spacing: 2px;
word-spacing: -2px;
word-spacing: 1em;
word-spacing: -0.15em;
word-spacing: 1rem;
word-spacing: -0.11rem;

/* percentage(% 단위) 값: 일부 브라우저에서만 지원 */
word-spacing: -50%;
word-spacing: 200%;

/* 글로벌 값 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;