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 words of a sentence with CSS
The word-spacing property is used to add or subtract space between the words of a sentence. Possible values are normal or a number specifying space.
Syntax
word-spacing: normal | length | initial | inherit;
Parameters
| Value | Description |
|---|---|
normal |
Default spacing between words |
length |
Specific spacing (px, em, rem, etc.) |
initial |
Sets to default value |
inherit |
Inherits from parent element |
Example: Increasing Word Spacing
You can try to run the following code to implement word-spacing property with increased spacing.
<html>
<head>
<style>
.normal-spacing {
word-spacing: normal;
}
.wide-spacing {
word-spacing: 8px;
}
.extra-wide {
word-spacing: 15px;
}
</style>
</head>
<body>
<p class="normal-spacing">
Asia is a continent with normal spacing.
</p>
<p class="wide-spacing">
Asia is a continent with 8px spacing.
</p>
<p class="extra-wide">
Asia is a continent with 15px spacing.
</p>
</body>
</html>
Example: Decreasing Word Spacing
You can also use negative values to reduce space between words.
<html>
<head>
<style>
.tight-spacing {
word-spacing: -2px;
}
.very-tight {
word-spacing: -5px;
}
</style>
</head>
<body>
<p class="tight-spacing">
This text has reduced word spacing of -2px.
</p>
<p class="very-tight">
This text has very tight spacing of -5px.
</p>
</body>
</html>
Common Use Cases
- Headers: Increase spacing for dramatic effect
- Justified text: Fine-tune spacing for better alignment
- Design elements: Create specific visual effects
- Responsive design: Adjust spacing for different screen sizes
Conclusion
The word-spacing property provides precise control over spacing between words. Use positive values to increase spacing and negative values to decrease it for better typography control.
Advertisements
