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

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

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

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

Отслеживать
3,847 3 3 золотых знака 20 20 серебряных знаков 37 37 бронзовых знаков
задан 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 золотых знака 20 20 серебряных знаков 37 37 бронзовых знаков

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

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

Как изменить расстояние между строками текста?

Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height . В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height : 2 устанавливает двойной интервал, а line-height : 1.5 — полуторный (пример 1).

Пример 1. Интерлиньяж в тексте

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Интерлиньяж p.dline < line-height: 1.5; >P  
Данный термин переводится как «печенье», но поскольку это название лишь сбивает с толку, его оставляют без перевода. Cookie можно использовать для сохранения даты последнего посещения читателя, паролей, а также любой информации о действиях посетителя на сайте. Подобное применение позволяет персонализировать сайт и сделать его более удобным для посетителей.

Результат данного примера показан на рис. 1.

Межстрочное расстояние

Рис. 1. Вид текста при разном межстрочном расстоянии

Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em .

Расстояние между буквами, строками, ширина табуляции в CSS

Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.

Красная строка

Свойство text-indent устанавливает сдвиг первой строки, цвет первой буквы можно определить свойством :first-letter.

Расстояние между буквами

Свойство letter-spacing устанавливает интервал между символами. В качестве значений принимаются единицы длины (px, in, pt, em, ex), допустимо отрицательное значение. Лучшая точность получается при использовании em.

Ширина пробелов

Word-spacing задает интервал между словами, значение можно указать в px, in, pt, em, ex.

Ширина табуляции

Свойство tab-size устанавливает ширину табуляции в , , и других элементах со свойством white-space: pre . В качестве значения используется количество символов (по умолчанию 8) или единицы длины.

Свойство пока ещё не стандартизировано W3C, но поддерживается современными браузерами.

Ширина букв

Свойство font-stretch задаёт ширину символов в шрифте, работает только со шрифтами, у которых есть поддержка разных начертаний. Значения задаются константами или процентами:

normal	100%	Обычная ширина
semi-condensed	87.5%	Узковатая ширина
condensed	75%	Узкая ширина
extra-condensed	62.5%	Очень узкая ширина
ultra-condensed	50%	Самая узкая ширина
semi-expanded	112.5%	Широковатая ширина
expanded	125%	Средне-большая ширина
extra-expanded	150%	Очень большая ширина
ultra-expanded	200%	Самая большая ширина

Как увеличить расстояние между ссылками?

а то у вас установлен стиль только для блока a_menu в котором находятся ссылки . , а для них тоже нужен стиль в котором вы и пропишите на каком расстоянии друг от друга они должны находиться и прочие нужные параметры

Отслеживать
ответ дан 29 окт 2020 в 8:11
37.5k 4 4 золотых знака 28 28 серебряных знаков 77 77 бронзовых знаков
Жесть я дурачок, спасибо за помощь!
29 окт 2020 в 9:00

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.