The word-spacing property in CSS is used to control the spacing between words in a text element. It helps improve readability and allows better text formatting for different design needs.
- Can be set to normal or a specific positive or negative length value.
- Increases or decreases the white space between words as needed.
- Commonly used to enhance typography and create visually balanced text layouts.
Syntax
word-spacing: normal | length | initial | inherit;Property values
Normal: Defines the default space between words, which is 0.25em. This is the default value.
Example: Here, we demonstrates the word-spacing CSS property, setting text to normal spacing, styled in green, bold, and a font size of 25px.
<!DOCTYPE html>
<html>
<head>
<title>
CSS word-spacing Property
</title>
</head>
<body>
<h1>The word-spacing Property</h1>
<h2>word-spacing: normal:</h2>
<p style="word-spacing: normal;
color: green; font-weight:
bold; font-size: 25px;">
This is some text. This is some text.
</p>
</body>
</html>
Length: It defines an additional space between words (in px, pt, cm, em, etc). Negative values are also allowed.
Example: Here, we sets word-spacing to 20px in a paragraph, styled in green, bold, and 25px font. Demonstrates the CSS word-spacing property for text spacing adjustment.
<!DOCTYPE html>
<html>
<head>
<title>CSS word-spacing Property</title>
</head>
<body>
<h1>The word-spacing Property</h1>
<h2>word-spacing: length is 20px</h2>
<p style="word-spacing: 20px;
color: green;
font-weight: bold;
font-size: 25px;">
GeeksforGeeks - A Computer Science Portal For Geeks!
</p>
</body>
</html>
Example: Here, we demonstrating the word-spacing property with a negative value of -20px, adjusting the space between words in a paragraph for emphasis and style.
<!DOCTYPE html>
<html>
<head>
<title>CSS word-spacing Property</title>
</head>
<body>
<h1>The word-spacing Property</h1>
<h2>word-spacing: length is -20px</h2>
<p style="word-spacing: -20px;
color: green;
font-weight: bold;
font-size: 25px;">
GeeksforGeeks - A Computer Science Portal For Geeks!
</p>
</body>
</html>