Отступ между словами
С помощью свойства word-spacing можно задать расстояние между словами. Свойство word-spacing не будет действовать в том случае, если задан параметр выравнивания justify, свойства text-align, которое выравнивает текст по ширине.
word-spacing : 1em; word-spacing : 18px; word-spacing : inherit; word-spacing : normal;
1em – дистанция между словами 1em
18px – дистанция между словами восемнадцать пикселей
inherit – наследование родительского значения
normal – интервал между словами по умолчанию
HTML Отступ между словами по умолчанию.
CSS .container < width: 360px; font-size: 16px; margin: 10px auto; padding: 3px 20px; background-color: #fc0; border: 4px solid #333; >.distance
Промежуток между словами
Между словами используется символ пробела. Положительное значение свойства word-spacing задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.
Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела.
Отступы между inline или inline-block элементами
Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово про слово» в исходном коде выглядит так:
«слово в слово про слово»
Изменить это поведение можно с помощью свойства white-space . У тега по умолчанию white-space имеет значение pre и моноширинный шрифт.
Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent .
Те же правила и свойства CSS распространяются и на inline и inline-block элементы [подробнее]. Например, « слово в слово про слово » .
span «слово в слово про слово»
Как убрать расстояние между inline-block элементами
Вариант 1. Удалить символ пробела
Вариант 2. Задать отрицательное значение word-spacing родительскому элементу
Как настроить интервал между inline-block элементами
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- letter-spacing : промежуток между буквами
- word-wrap : перенос слов на следующую строку
word-spacing
Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing .
Синтаксис
word-spacing: | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.
normal Устанавливает интервал между словами как обычно. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
word-spacing p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства word-spacing
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Пробелы между словами
Особенность языка HTML такова, что любое количество пробелов между словами будет показано как один. Но иногда у разработчика сайта возникает необходимость изменить расстояние между словами текста, в частности, увеличить.
Известно, что размер шрифта меняется с помощью тега FONT или с использованием стилей. Может возникнуть идея установить пробел большего размера, используя, например, подобную конструкцию: Обещаем/span>обещать не обещать! Выглядит это, во-первых, очень громоздко, а во-вторых, размер пробела меняется не только по горизонтали, но и по вертикали. Поэтому строка будет смещена от своей базовой линии. Для более изящного решения задачи можно порекомендовать следующие способы.
Использование неразделяемого пробела
Символ используется во многих случаях. Полюбился он за то, что независимо от каких-либо условий, всегда устанавливает пробел. Так что можно поставить подряд хоть с десяток таких пробелов, браузер покажет их все. Хотя слово в данном случае не совсем верно, пробел все-таки никак не видно (пример 1). Пример 1. Использование символа Я за вас свою работу выполнять не буду! В примере создана красная строка из четырех пробелов: один обычный и три с помощью символа . Размер такого пробела совпадает с размером базового шрифта. Использование неразделяемого пробела сопряжено с определенными неудобствами. Представьте, что необходимо изменить расстояние между словами во всех текстах на сайте. Слишком много работы предстоит выполнить впустую. Поэтому наиболее приемлемым способом изменения пробелов между словами, является применение стилей.
Использование таблиц стилей
Чтобы задать расстояние между словами в тексте, используется параметр word-spacing. Его значение может быть установлено в пикселах (px), пунктах (pt), миллиметрах (mm) и других единицах (пример 2). Пример 2. Использование атрибута word-spacing Слон + хорошая пища = два слона Преимущество последнего указанного подхода в его удобстве и централизованности. Стиль можно описать один раз в глобальной таблице стилей и применять его к нужным элементам веб-страницы (пример 3). Пример 3. Использование Таблиц стилей
-Булочку надо?
-Спасибо, не надо!
-Не надо?! Спасибо!