Интервал между словами css: line-height, letter-spacing, word-spacing — учебник CSS

Leave a Comment / Css / By /

Расстояние между словами (свойство word-spacing)

word-spacing

word-spacing наследуется, применяется ко всем элементам, изменяет текст и строчные элементы

normal0

em rem ex ch vh vw vmin vmax px mm cm in pt pc %

initialкак normal
inheritнаследует значение родителя
unsetнаследует значение родителя
<style>
div {
  word-spacing: normal;
}
</style>
<div><code>word-spacing</code> наследуется, применяется ко всем элементам, изменяет текст и строчные элементы</div>

Что такое

word-spacing CSS

Между словами используется символ пробела.

Положительное значение свойства word-spacing задаёт к пробелу дополнительное расстояние, тем самым увеличивая отступ между словами. Отрицательное значение, наоборот, уменьшает.

Значение word-spacing в процентах устанавливает дополнительное расстояние между словами в процентах от длины символа пробела. Скоро будет поддерживаться браузерами.

Отступы между

inline или inline-block элементами

Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Знак переноса на новую строку также является пробельным символом. Например, «слово в слово про слово» в исходном коде выглядит так:

«слово в      слово
про
      слово»

Поведение inline и inline-block элементов то же как и у слов вне тегов, на них распространяются те же правила и свойства CSS [подробнее]. Например, «слово в слово про слово».

<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 для некоторых элементов закрывающийся тег может быть опущен. Предполагается, что он присутствует перед следующим указанным в спецификации тегом (скажем, </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;
  background-color: #fff5d7;
}
</style>
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Как настроить интервал между блоками

Если строка начинается с пробела, то он игнорируется. При уменьшении ширины родителя, смещённый вниз inline-блок вплотную прижимается к границе предка. Что более предпочтительно, чем поведение margin

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  1. 1
  2. 2
  3. 3
  4. 4
  5. 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; 
}
ol:nth-of-type(1) 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>

Можно также взглянуть на похожий пример с выравниванием блоков по центру

Расстояние между словами в css

Вопрос задан

Изменён 6 лет 4 месяца назад

Просмотрен 3k раза

Есть список, который превращается в горизонтальное меню.
Превращается он хорошо, но мне нужны большие отступы между словами.

word-spacing не работает, только padding.

Проблема в том, что справа и слева тоже вставляются отступы, то есть слова «

Главная» и «Карта сайта» отходят от крайних границ. Как можно исправить?

.bottom_menu {	
    margin: 0;
    -webkit-padding-start: 0;
}

.bottom_menu li {
    display: table-cell;
    text-transform: uppercase;
    font-family: verdana;
    color: white;
    font-size: 28px;
    padding: 12px 15px;
}
<ul>
    <li><a href="/">главная</a></li>
    <li><a href="/">главная</a></li>
    <li><a href="/">главная</a></li>
    <li><a href="/">главная</a></li>
    <li><a href="/">карта сайта</a></li>
</ul>

2

Задать отступы между ссылками можно так padding-right: 30px

Запретить перенос строки можно так white-space: nowrap

Отступы между словами задаются так word-spacing: 20px в родительском элементе. Но тогда и ссылка карта__сайта будет иметь отступ

Вместо padding можно указать margin-left: 30px с float: left

Убрать отступ у последнего элемента в списке можно в html через атрибут style
<li><a href="/">карта сайта</a></li>

или в css, используя псевдокласс :last-child

.bottom_menu {	
    margin: 0;
    padding: 0;
    // word-spacing: 20px;
}

.bottom_menu li {
    display: table-cell;
    text-transform: uppercase;
    font-family: verdana;
    color: white;
    font-size: 28px;
  
  padding-right: 30px;
  white-space: nowrap;
}

.bottom_menu li:last-child {
    padding-right: 0px;
}
<ul>
    <li><a href="/">главная</a></li>
    <li><a href="/">главная</a></li>
    <li><a href="/">главная</a></li>
    <li><a href="/">главная</a></li>
    <li><a href="/">карта сайта</a></li>
</ul>

Не особо понял что нужно автору, может это? Чтобы растянуть меню на всю ширину страницы нужно добавить display: table; width: 100%, а чтобы убрать у первого и у последнего элементов отступы нужно добавить псевдоклассы :first-child и :last-child с нужными paddind, это сделано в примере ниже:

body {
  margin: 0;
  padding: 0;
}
. bottom_menu {
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
  background: #ccc;
}
.bottom_menu li {
  display: table-cell;
  text-transform: uppercase;
  font-family: verdana;
  color: white;
  font-size: 28px;
  padding: 12px 15px;
  white-space: nowrap;
}
.bottom_menu li:first-child {
  padding-left: 0;
}
.bottom_menu li:last-child {
  padding-right: 0;
}
<ul>
  <li><a href="/">главная</a>
  </li>
  <li><a href="/">главная</a>
  </li>
  <li><a href="/">главная</a>
  </li>
  <li><a href="/">главная</a>
  </li>
  <li><a href="/">карта сайта</a>
  </li>
</ul>

2

Добавляйте padding, а потом li:nth-last-child{padding:0}, ну и по аналогии для первого элемента

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойство интервала между словами в CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Укажите, что расстояние между словами в элементах

должно составлять 30 пикселей:

p {
  интервал между словами: 30 пикселей;
}

Попробуйте сами »

Определение и использование

Свойство word-spacing увеличивает или уменьшает пробелы между словами.

Примечание: Допускаются отрицательные значения.

Показать демо ❯

Значение по умолчанию: обычный
Унаследовано: да
Анимация: да. Читать о анимированном Попытайся
Версия: CSS1
Синтаксис JavaScript: объект .style.wordSpacing=»20px» Попытайся

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
межсловный интервал 1,0 6,0 1,0 1,0 3,5

Синтаксис CSS

расстояние между словами: нормальный| длина |начальный|наследовать;

Значения свойств

Значение Описание Демо
обычный Определяет нормальный интервал между словами (0,25 em). Это по умолчанию Демонстрация ❯
длина Определяет дополнительный пробел между словами (в px, pt, cm, em и т. д.). Допускаются отрицательные значения. Читать о единицах длины Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Расстояние между текстом CSS

Ссылка на HTML DOM: Свойство wordSpacing

❮ Предыдущий Полное руководство по CSS Далее ❯


NEW

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

900374 Лучшие ссылки HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


7 Top5 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

Расстояние между словами CSS

Пример <стиль> п { семейство шрифтов: без засечек; размер шрифта: 1.5em; цвет: салатовый; интервал между словами: 1.5em; }

Интервал между словами CSS позволяет определить расстояние между словами.

Свойство CSS word-spacing управляет расстоянием между словами.

Принцип работы word-spacing заключается в том, что он указывает дополнительных пробелов между каждым словом. Таким образом, значение нуля, например, не имеет никакого эффекта (применяется обычный интервал). Положительные значения увеличивают интервал, а отрицательные значения уменьшают интервал.

Также см. letter-spacing для регулировки расстояния между буквами.

Синтаксис

межсловный интервал: [нормальный | <длина> | <процент>]

Возможные значения

обычный
Дополнительный интервал не применяется. Вычисляет до нуля.
длина
Указывает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом. Отрицательные значения допустимы, но могут быть ограничения, зависящие от реализации.
проценты
Указывает дополнительный интервал в процентах от ширины продвижения затронутого символа (правильное расстояние между начальным положением пера глифа и начальным положением пера следующего глифа).

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует либо как наследует , либо как начальное , в зависимости от того, наследуется свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Общая информация

Исходное значение
обычный
Применимо к
Все элементы
Унаследовано?
Да
СМИ
Визуальный
Анимируемый
Да (см. пример)

Пример кода

/* Дополнительный интервал не добавляется — вычисляется до нуля */ п { межсловный интервал: нормальный; } /* Дополнительный интервал не добавляется — так же, как «обычный» */ п { межсловный интервал: 0; } /* Положительная длина — добавляет 0,5 em к обычному интервалу */ п { интервал между словами: .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *