Особливість мови HTML така, що будь-яка кількість пробілів між словами буде показана як один. Але іноді у розробника сайту виникає необхідність змінити відстань між словами тексту, зокрема, збільшити.

Відомо, що розмір шрифту змінюється за допомогою тега FONT або з використанням стилів. Може виникнути ідея встановити пробіл більшого розміру, використовуючи, наприклад, подібну конструкцію:

Обіцяєм<span style="font-size: 150%"< >/span>обіцять<span style="font-size: 150%"> </span>не<span style="font-size: 150%"> </span>обіцять!

Виглядає це, по-перше, дуже громіздко, а по-друге, розмір пробілу змінюється не тільки по горизонталі, а й по вертикалі. Тому рядок буде зміщений від своєї базової лінії.

Для більш елегантного вирішення задачі можна спробувати такі варіанти.

Використання нероздільного пробілу

Символ використовується в багатьох випадках. Полюбився він за те, що незалежно від будь-яких умов, завжди встановлює пробіл. Тож можна поставити поспіль хоч із десяток таких пробілів, браузер покаже їх усі. Хоча слово в цьому випадку не зовсім правильно, пробіл усе-таки ніяк не видно (приклад 1).

Приклад 1. Використання символу &nbsp;

&nbsp;&nbsp;&nbsp;Я за вас свою роботу виконувать не буду!

У прикладі створено червоний рядок із чотирьох пробілів: один звичайний і три за допомогою символу   . Розмір такого пробілу збігається з розміром базового шрифту.

Використання нероздільного пробілу пов'язане з певними незручностями. Уявіть, що необхідно змінити відстань між словами у всіх текстах на сайті. Занадто багато роботи доведеться виконати даремно. Тому найприйнятнішим способом зміни пробілів між словами є застосування стилів.

Використання таблиць стилів

Щоб задати відстань між словами в тексті, використовується параметр 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.