Как сделать отступ в css между словами

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

Есть список, который превращается в горизонтальное меню.
Превращается он хорошо, но мне нужны большие отступы между словами. word-spacing не работает, только padding . Проблема в том, что справа и слева тоже вставляются отступы, то есть слова «Главная» и «Карта сайта» отходят от крайних границ. Как можно исправить?

.bottom_menu < margin: 0; -webkit-padding-start: 0; >.bottom_menu li

Отслеживать
3,847 3 3 золотых знака 19 19 серебряных знаков 35 35 бронзовых знаков
задан 12 июн 2016 в 21:56
Artur Mark Artur Mark
99 1 1 серебряный знак 8 8 бронзовых знаков
12 июн 2016 в 22:27
Откатывать верный и подробный ответ и ставить на другой не красиво так поступать
13 июн 2016 в 11:41

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

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

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

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

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

или в 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

Отслеживать
ответ дан 12 июн 2016 в 22:33
3,847 3 3 золотых знака 19 19 серебряных знаков 35 35 бронзовых знаков

Не особо понял что нужно автору, может это? Чтобы растянуть меню на всю ширину страницы нужно добавить 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

Отслеживать
ответ дан 12 июн 2016 в 22:38
MasterAlex MasterAlex
6,167 1 1 золотой знак 12 12 серебряных знаков 23 23 бронзовых знака

Между пунктами меню нужен большой пробел. Он добавляется с помощью padding. Но padding так же добавляет этот самый пробел и с краев и получается, что меню не justify, a center)) В общем вот s019.radikal.ru/i604/1606/57/20667115869f.jpg — видите, справа и слева меню не прилегает к краю

Промежуток между словами

Между словами используется символ пробела. Положительное значение свойства 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. 1
2. 2
3. 3
4. 4
5. 5

1. 1
2. 2
3. 3
4. 4
5. 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

     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 .

Межсимвольный, межстрочный интервал CSS. Расстояние между словами

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.

Межсимвольный интервал CSS: letter-spacing

Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).

Пример записи межсимвольного интервала:

Интервал между словами: word-spacing

Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:

Межстрочный интервал: line-height

С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .

Ниже – пример, как сделать межстрочный интервал CSS:

На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Итоги

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