word-spacing 속성

word-spacing 속성은 단어 사이의 간격을 설정합니다. 속성 값은 퍼센트를 제외한 모든 크기 단위를 사용할 수 있습니다. 음수 값도 허용됩니다. normal 값은 브라우저가 단어 간격을 자체적으로 계산하도록 합니다(기본값).

텍스트에 text-align을 사용하여 justify 값으로 정렬이 지정된 경우, 단어 사이의 간격은 자동으로 설정되지만, word-spacing을 통해 지정된 값보다 작게 설정되지는 않습니다.

구문

css선택자 {
  word-spacing: 값;
}

예시

단어 사이의 간격을 30px로 설정해 보겠습니다:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing.
</p>

cssp {
  word-spacing: 30px;
  text-align: left;
}

Результат:

예시

word-spacing을 음수 값으로 설정하면 단어 사이의 거리가 거의 사라집니다:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing.
</p>

cssp {
  word-spacing: -7px;
}

Результат:

예시

이 속성을 0으로 설정하더라도 단어가 서로 붙지는 않습니다:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing.
</p>

cssp {
  word-spacing: 0;
}

Результат:

예시

word-spacing을 normal 값으로 설정합니다 (이 값이 기본값입니다):

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing.
</p>

cssp {
  word-spacing: normal;
}

Результат: