**Letter-spacing** is the space before and after each letter. Whenever we type text, each letter in the text has a particular distance from the one before and after it. 

Using the `letter-spacing` property in CSS we can define how much space to give between letters. 

# How to use this property

The following snippet shows the syntax used to envoke the `letter-spacing` property.

<html>
 <head>
     <style>
     class{
         letter-spacing: normal | size in pixels | size in em | size in cm
          }
     </style>
 </head>
 <body>
   
 </body>
</html>

# What values can be given to this property?

The `letter-spacing` property can take in multiple types of values. Let's look at a few possible ones:

* If you simply type `normal` then it gives the default spacing between letters

* You can also write a number followed by `px` to signify the distance in pixels between letters

* You can also write a number followed by `cm` to signify the distance in centimeters between letters

* Lastly, the spacing can also be specified in `em` where *1 em* is equivalent to *16 pixels*

Now let's look at some examples of how to use `letter-spacing`.

# Examples

## 1. Using `normal`

This sets the `letter-spacing` to its default value.

<html>
 <head>
   <style>
     h1{
       letter-spacing: normal;
     }
   </style>
 </head>
 <body>
   <h1>Hello</h1>
 </body>
</html>

codemirror

## 2. Using pixels

The example below shows how to set the spacing between the letters to a difference of 10 pixels. You can change the number in the code snippet below, to see how spacing varies.

<html>
 <head>
   <style>
     h1{
       letter-spacing: 10px;
     }
   </style>
 </head>
 <body>
   <h1>Hello</h1>
 </body>
</html>

While the example below also assigns a pixel value to `letter-spacing`. This time the value is a **negative number**. This will decrease the default spacing by that number of pixels.

<html>
 <head>
   <style>
     h1{
       letter-spacing: -5px;
     }
   </style>
 </head>
 <body>
   <h1>Hello</h1>
 </body>
</html>

## 3. Using em

In the example below, we have set the `letter-spacing` to 0.25em. As em in itself is equivalent to 16 pixels, this will result in a spacing of 4 pixels. 

<html>
 <head>
   <style>
     h1{
       letter-spacing: 0.25em;
     }
   </style>
 </head>
 <body>
   <h1>Hello</h1>
 </body>
</html>

## 4. Using cm

The spacing in the example below is set to 1cm between each letter.

<html>
 <head>
   <style>
     h1{
       letter-spacing: 1cm;
     }
   </style>
 </head>
 <body>
   <h1>Hello</h1>
 </body>
</html>

Learning about "letter-spacing" in CSS

Letter-spacing is the space before and after each letter. Whenever we type text, each letter in the text has a particular distance from the one before and after it. Using the letter-spacing property in CSS we can define how much space to give between letters. 

Learning about "letter-spacing" in CSS

How to use this property

What values can be given to this property?

Examples

1. Using normal

2. Using pixels

3. Using em

4. Using cm

1. Using `normal`