<p>단어와 단어 사이 공백 간격을 조절합니다.</p>
p {
    word-spacing: /* 데모 value */
}
데모 적용해 보기 데모 버튼을 클릭해 보세요!
<div>
    <button>인라인 요소</button>
    <button>인라인 요소</button> <!-- 이 전 요소와 줄바꿈해서 마크업되면 공백이 생깁니다. -->
</div>
div {
    word-spacing: /* 데모 value */
}
데모 적용해 보기 데모 버튼을 클릭해 보세요!
selector {
    word-spacing: /* value */
}
/* 키워드 값 */
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;
간격을 너무 좁게 설정한 경우
간격을 너무 펼쳐지게 설정한 경우

마지막 업데이트 정보: 2024-05-01

caniuse.com에서 더 자세한 정보를 확인해 보세요.