Особливість мови HTML така, що будь-яка кількість пробілів між словами буде показана як один. Але іноді у розробника сайту виникає необхідність змінити відстань між словами тексту, зокрема, збільшити.
Відомо, що розмір шрифту змінюється за допомогою тега FONT або з використанням стилів. Може виникнути ідея встановити пробіл більшого розміру, використовуючи, наприклад, подібну конструкцію:
Обіцяєм<span style="font-size: 150%"< >/span>обіцять<span style="font-size: 150%"> </span>не<span style="font-size: 150%"> </span>обіцять!
Виглядає це, по-перше, дуже громіздко, а по-друге, розмір пробілу змінюється не тільки по горизонталі, а й по вертикалі. Тому рядок буде зміщений від своєї базової лінії.
Для більш елегантного вирішення задачі можна спробувати такі варіанти.
Використання нероздільного пробілу
Символ використовується в багатьох випадках. Полюбився він за те, що незалежно від будь-яких умов, завжди встановлює пробіл. Тож можна поставити поспіль хоч із десяток таких пробілів, браузер покаже їх усі. Хоча слово в цьому випадку не зовсім правильно, пробіл усе-таки ніяк не видно (приклад 1).
Приклад 1. Використання символу
Я за вас свою роботу виконувать не буду!
У прикладі створено червоний рядок із чотирьох пробілів: один звичайний і три за допомогою символу . Розмір такого пробілу збігається з розміром базового шрифту.
Використання нероздільного пробілу пов'язане з певними незручностями. Уявіть, що необхідно змінити відстань між словами у всіх текстах на сайті. Занадто багато роботи доведеться виконати даремно. Тому найприйнятнішим способом зміни пробілів між словами є застосування стилів.
Використання таблиць стилів
Щоб задати відстань між словами в тексті, використовується параметр word-spacing. Його значення може бути встановлено в пікселах (px), пунктах (pt), міліметрах (mm) та інших одиницях (приклад 2).
Приклад 2. Використання атрибута word-spacing
<span style="word-spacing: 10px">Слон
+ хороша їжа = два слона</span></code>
Перевага останнього зазначеного підходу в його зручності та централізованості. Стиль можна описати один раз у глобальній таблиці стилів і застосовувати його до потрібних елементів веб-сторінки (приклад 3).
Приклад 3. Використання Таблиць стилів
<style>
P { word-spacing: 10px }
</style>
</head>
<body>
<p>-Булочку?</p>
<p>-Дякую, не потрібно!</p>
<p>-Не потрібно?! Дякую!</p>
</body>
</html>
Зауважте, що перед початком рядка жодних відступів не додається, для створення абзацу слід використовувати параметр text-indent.