🔤 CSS word-spacing — Control Space Between Words

The word-spacing property adjusts the horizontal space between words in text. It lets you increase or decrease the default spacing to improve readability or achieve a desired style.

---

🔹 What Does word-spacing Do?

• Adds extra space between words (spaces separating words).
• Can be positive (wider gaps) or negative (tighter gaps).
• Enhances typography by controlling how words spread across a line.

---

📘 Syntax

selector {
  word-spacing: normal | <length>;
}

• normal: Default spacing, based on the browser’s font metrics.
• <length>: Custom spacing value (e.g., 10px, 0.5em, -2px).

---

✅ Examples

1. Normal Word Spacing

p {
  word-spacing: normal;
}

✅ Default spacing, words appear normally spaced.

---

2. Increased Word Spacing

p {
  word-spacing: 20px;
}

✅ Adds 20 pixels of space between each word, making text more airy.

---

3. Reduced Word Spacing

p {
  word-spacing: -5px;
}

✅ Decreases space between words, making the text tighter.

---

🖼️ Image Idea: Word Spacing Comparison

Show a sentence with:

• Normal spacing
• Increased spacing (+20px)
• Decreased spacing (-5px)

Highlight the difference visually.

---

💡 Tips for Using word-spacing

• Use sparingly — too much space can reduce readability.
• Negative values can help adjust tight designs but avoid overlap.
• Combine with letter-spacing for full control over text spacing.
• Great for headings or decorative text where spacing impact is strong.

---

✅ Summary

Property	word-spacing
Purpose	Control horizontal space between words
Default Value	normal
Values	Length units (px, em, rem), positive or negative
Use Cases	Typography tweaking, decorative text spacing

---