Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Add or subtract space between the letters that make up a word with CSS
To add or subtract space between the letters that make up a word, use the letter-spacing CSS property. This property controls the horizontal spacing between characters in text.
Syntax
letter-spacing: normal | length | initial | inherit;
Property Values
- normal - Default spacing between letters
- length - Specific spacing value (px, em, rem, etc.)
- initial - Sets to default value
- inherit - Inherits from parent element
Example: Adding Letter Spacing
<html>
<head>
<style>
.spaced-text {
letter-spacing: 4px;
}
.tight-text {
letter-spacing: -1px;
}
.normal-text {
letter-spacing: normal;
}
</style>
</head>
<body>
<p class="normal-text">Normal letter spacing</p>
<p class="spaced-text">Increased letter spacing</p>
<p class="tight-text">Decreased letter spacing</p>
</body>
</html>
Different Units Example
<html>
<head>
<style>
.px-spacing { letter-spacing: 3px; }
.em-spacing { letter-spacing: 0.2em; }
.rem-spacing { letter-spacing: 0.1rem; }
</style>
</head>
<body>
<p class="px-spacing">Spacing with pixels (3px)</p>
<p class="em-spacing">Spacing with em units (0.2em)</p>
<p class="rem-spacing">Spacing with rem units (0.1rem)</p>
</body>
</html>
Comparison Table
| Value | Effect | Use Case |
|---|---|---|
| Positive values (2px, 0.1em) | Increases spacing | Headlines, emphasis |
| Negative values (-1px, -0.05em) | Decreases spacing | Condensed text |
| normal | Default spacing | Regular body text |
Conclusion
The letter-spacing property provides precise control over character spacing. Use positive values to spread letters apart and negative values to bring them closer together for various design effects.
Updated on: 2026-03-15T23:18:59+05:30
398 Views
Advertisements