html — Как увеличить расстояние между ссылками?
Вопрос задан
Изменён 2 года 2 месяца назад
Просмотрен 513 раз
не могу понять как сделать расстояние между ссылками.
body{ background-color: #ffffff; font-family: "Nunito Sans"; } .menu_header{ display:flex; justify-content:space-around; width: 100%; } .img_logo{ padding:75px 0px; } .a_menu{ padding: 97px 0px; color: #bab8b8; font-family: Nunito; font-size: 20px; font-weight: 400; font-style: normal; letter-spacing: normal; line-height: 14.61px; margin:0px 50px 0px 0px; }
<!DOCTYPE html> <!-- Оболочка документа, указываем язык содержимого --> <html lang="ru"> <head> <!-- Заголовок страницы в браузере --> <title>test</title> <!-- Подключаем CSS --> <link rel="stylesheet" href="/css/style.css" /> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap" rel="stylesheet"> <!-- Кодировка страницы --> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> </head> <body> <div> <div> <div> <img src="logotip.png" alt="357"> </div> <div> <a href="">Home</a> <a href="">Video</a> <a href="">Destinationmenu</a> <a href="">Booking</a> </div> </div> </div> </body> </html>
- html
- css
Ну а кто стили для тега <a>
будет определять?
. a_menu a { display: inline-block; margin: 0px 10px; }
а то у вас установлен стиль только для блока a_menu
в котором находятся ссылки <a>...</a>
, а для них тоже нужен стиль в котором вы и пропишите на каком расстоянии друг от друга они должны находиться и прочие нужные параметры
1
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
word-spacing — CSS | MDN
CSS-свойство word-spacing
устанавливает длину пробела между словами и между тегами.
/* Значение ключевым словом */ word-spacing: normal; /* <length> значения */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> значения */ word-spacing: 50%; word-spacing: 200%; /* Глобальные значения */ word-spacing: inherit; word-spacing: initial; word-spacing: unset;
Значения
normal
Нормальный интервал между словами, определённый текущим шрифтом и/или браузером.
length
Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.
percentage
Определяет дополнительный интервал как процент от предварительной ширины символа.
Формальный синтаксис
word-spacing =
normal | (en-US)
<length>
HTML
<div>Here are many words...</div> <div>...and many more!</div>
CSS
#mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; }
Большое положительное или отрицательное значение word-spacing
может сделать предложения, к которым применяется стиль, нечитаемыми. Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.
Разборчивый word-spacing
должен быть определён в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
Specification |
---|
CSS Text Module Level 3 # word-spacing-property |
Начальное значение | normal |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | да |
Проценты | зависит от ширины символа |
Обработка значения | абсолютная length |
Animation type | длина |
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on Github.
- Report the content issue.
- View the source on GitHub.
Want to get more involved? Learn
how to contribute.
This page was last modified on by MDN contributors.
word-spacing — CSS: Каскадные таблицы стилей
Свойство CSS word-spacing
задает длину интервала между словами и между тегами.
/* Значение ключевого слова */ межсловный интервал: нормальный; /* значения <длины> */ интервал между словами: 3px; интервал между словами: 0.3em; /* Глобальные значения */ интервал между словами: наследовать; межсловный интервал: начальный; межсловный интервал: вернуться; межсловный интервал: обратный слой; интервал между словами: не установлен;
Значения
-
нормальный
Нормальный интервал между словами, определенный текущим шрифтом и/или браузером.
-
<длина>
Указывает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом.
HTML
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
CSS
#mozdiv1 { интервал между словами: 15px; } #mozdiv2 { интервал между словами: 5em; }
Большое положительное или отрицательное значение word-spacing
сделает предложения, к которым применен стиль, нечитаемыми. Для текста, стилизованного с очень большим положительным значением, слова будут так далеко друг от друга, что он больше не будет казаться предложением. Для текста, оформленного с большим отрицательным значением, слова будут накладываться друг на друга до такой степени, что начало и конец каждого слова будут неузнаваемы.
Разборчивость межсловный интервал
следует определять в каждом конкретном случае, так как разные семейства шрифтов имеют разную ширину символов. Не существует единого значения, которое может гарантировать, что все семейства шрифтов автоматически сохранят свою удобочитаемость.
- MDN Понимание WCAG, пояснения к Руководству 1.4
- Понимание критерия успеха 1.4.8 | Понимание W3C WCAG 2.0
Исходное значение | нормальный |
---|---|
Применяется ко всем элементам | . Это также относится к ::first-letter и ::first-line . |
Унаследовано | да |
Проценты | относятся к ширине затронутого глифа |
Вычисленное значение | абсолютное <длина> |
Тип анимации | длина |
<Длина>
Спецификация |
---|
CSS Текстовый модуль Уровень 3 # Word-Sciess-Property |
BCD TABLES TABLE TABLE. Включите JavaScript для просмотра данных.
-
межбуквенный интервал
Обнаружили проблему с содержанием этой страницы?
- Редактировать страницу на Github.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие? Узнайте
, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Свойство интервала между словами в 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 Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9004 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.