CSS / 문단 꾸미기 / 글자 사이 간격, 단어 사이 간격 / letter-spacing, word-spacing

letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다.
값이 커지면 간격이 커집니다.
값에는 음수를 넣을 수 있습니다.
음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: Consolas, monospace;
      }
      .a {
        letter-spacing: -5px;
      }
      .b {
        letter-spacing: 0px;
      }
      .c {
        letter-spacing: 5px;
      }
      .d {
        word-spacing: -20px;
      }
      .e {
        word-spacing: 0px;
      }
      .f {
        word-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h1>letter-spacing</h1>
    <p class="a">Lorem Ipsum Dolor</p>
    <p class="b">Lorem Ipsum Dolor</p>
    <p class="c">Lorem Ipsum Dolor</p>
    <h1>word-spacing</h1>
    <p class="d">Lorem Ipsum Dolor</p>
    <p class="e">Lorem Ipsum Dolor</p>
    <p class="f">Lorem Ipsum Dolor</p>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!doctype html>

<head>

<style>

body {

font-family: Consolas, monospace;

}

.a {

letter-spacing: -5px;

}

.b {

letter-spacing: 0px;

}

.c {

letter-spacing: 5px;

}

.d {

word-spacing: -20px;

}

.e {

word-spacing: 0px;

}

.f {

word-spacing: 20px;

}

</style>

</head>

<body>

<h1>letter-spacing</h1>

<p class="a">Lorem Ipsum Dolor</p>

<p class="b">Lorem Ipsum Dolor</p>

<p class="c">Lorem Ipsum Dolor</p>

<h1>word-spacing</h1>

<p class="d">Lorem Ipsum Dolor</p>

<p class="e">Lorem Ipsum Dolor</p>

<p class="f">Lorem Ipsum Dolor</p>

</body>

</html>

값의 변화에 따른 간격의 변화를 보여주는 예제입니다.
글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다.
단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다.

마이크로소프트 엣지나 인터넷 익스플로러에서는 단어 사이의 간격을 음수로 정해도 글자가 겹치지 않을 정도로만 간격이 줄어듭니다.

속성 정보

letter-spacing

버전	기본값	상속	애니메이션
CSS1	normal	Yes	Yes

Chrome	Firefox	IE	Opera	Safari
1.0+	1.0+	4.0+	3.5+	1.0+

word-spacing

버전	기본값	상속	애니메이션
CSS1	normal	Yes	Yes

Chrome	Firefox	IE	Opera	Safari
1.0+	1.0+	6.0+	3.5+	1.0+

CSS

CODING FACTORY