word-spacing
- 0
- normal
- наследует значение родителя
- наследует значение родителя
word-spacing
наследуется, применяется ко всем элементам, применяется ко всем элементам, изменяет текст и строчные элементы<style> div { word-spacing: normal; } </style> <div>Свойство <code>word-spacing</code> наследуется, применяется ко всем элементам, изменяет текст и строчные элементы</div>
Что такое word-spacing
CSS
Между словами используется символ пробела. Положительное значение свойства word-spacing
задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.
Значение word-spacing
в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела.
Отступы между inline
или inline-block
элементами
Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово про слово» в исходном коде выглядит так:
«слово в слово про слово»
Изменить это поведение можно с помощью свойства white-space
. У тега <pre>
по умолчанию white-space
имеет значение pre
и моноширинный шрифт.
Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent
.
Те же правила и свойства CSS распространяются и на inline
и inline-block
элементы [подробнее]. Например, «слово в слово
про
слово».
<style> span { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> «<span>слово</span> <span>в</span> <span>слово</span> <span>про</span> <span>слово</span>»
Как убрать расстояние между inline-block
элементами
<style> li { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
Вариант 1. Удалить символ пробела
<style> li { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> <ol> <li></li><li></li><li></li><li></li><li></li> </ol>
В HTML5 для некоторых элементов закрывающийся тег может быть опущен. [whatwg.org] Предполагается, что он присутствует перед следующим указанным в спецификации тегом (скажем, </li>
прижат без промежутка к следующему <li>
или к закрывающемуся тегу родительского элемента).
<style> li { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> <ol> <li> <li> <li> <li> <li> </ol>
Вариант 2. Задать отрицательное значение word-spacing
родительскому элементу
<style> ol { word-spacing: -100%; } li { display: inline-block; padding: .5em; border: 1px solid green; word-spacing: normal; background-color: #fff5d7; } </style> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
Как настроить интервал между inline-block
элементами
Если строка начинается с пробела, то он игнорируется. При уменьшении ширины родителя, смещённый вниз inline-блок вплотную прижимается к границе предка. Что более предпочтительно, чем поведение margin
.
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
<style> ol { border: 1px solid blue; padding: 0; overflow: auto; resize: horizontal; } ol li { display: inline-block; margin: 0; border: 1px solid green; padding: .5em; vertical-align: middle; background-color: #fff5d7; } ol:nth-of-type(1) { word-spacing: 4em; /* между пунктами li отступ 4em */ } ol:nth-of-type(1) li { /* доп. расстояние между словами li отсутствует */ word-spacing: normal; } ol:nth-of-type(2) li + li { margin-left: 4em; } </style> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol>
Можно также взглянуть на похожий пример с выравниванием блоков по центру.