Урок 1 із 104
1%
Відстань між літерами та словами в CSS
Вивчаємо властивості letter-spacing і word-spacing для керування відстанню між літерами та словами.
Відстань між літерами та словами в CSS
CSS дозволяє змінювати відстань між літерами та словами. Для цього використовуються властивості letter-spacing і word-spacing.
- letter-spacing — задає відстань між літерами.
- word-spacing — задає відстань між словами.
- Можна використовувати додатні, від'ємні та нульові значення.
Властивість letter-spacing
Властивість letter-spacing змінює відстань між усіма літерами тексту.
p {
letter-spacing: 2px;
}
/* Збільшити відстань */
letter-spacing: 3px;
/* Без змін */
letter-spacing: 0;
/* Зменшити відстань */
letter-spacing: -1px;Властивість word-spacing
Властивість word-spacing змінює відстань між словами тексту.
p {
word-spacing: 5px;
} ❗ Важливо:
Властивості letter-spacing і word-spacing можна використовувати одночасно.
Практичні завдання
📌 Завдання:
- №1. Встановіть відстань між літерами 1px.
- №2. Встановіть відстань між літерами 3px.
- №3. Встановіть відстань між літерами -1px.
- №4. Встановіть відстань між словами 3px.
- №5. Встановіть відстань між словами 0px.
💡 Показати підказку
Для зміни відстані між літерами використовуйте letter-spacing, а між словами — word-spacing.
✅ Показати відповідь
/* №1 */ letter-spacing: 1px; /* №2 */ letter-spacing: 3px; /* №3 */ letter-spacing: -1px; /* №4 */ word-spacing: 3px; /* №5 */ word-spacing: 0;