Подскажите как увеличить растояние между ссылками?
Site Joomla-Support.ru is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.
Внимание! Проект Joomla-Support.ru официально никак не связан с Open Source Matters и не представляет Open Source Matters или Joomla! Project
Информация, опубликованная на форуме, не может считаться одобренной или рекомендованной Open Source Matters или Joomla! Project.
Название и логотип Joomla!® используются по ограниченной лицензии, предоставляемой Open Source Matters, владельцем торговой марки в Соединенных Штатах и других странах.
Изучаем поля и отступы в CSS на примере четырех HTML-элементов
HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей ( рамкой ) указанного HTML-элемента .
Разницу между полем и отступом можно увидеть на следующем рисунке:
Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.
Посмотреть демо-версию и код
У нас есть три элемента div . Первые два — со свойством HTML margin , а третий — со свойством padding . Расстояние между элементами div — это margin , а пространство между текстом внутри третьего элемента div и линией его границы — это padding .
Отступы в CSS — cинтаксис CSS-свойств padding и margin
Синтаксис, который используется для единичного объявления свойства CSS margin :
margin: 50px;
Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:
margin: 10px 20px 50px 100px;
- 10px — отступ сверху CSS;
- 20px — отступ справа CSS;
- 30px — отступ снизу CSS;
- 40px — отступ слева CSS .
Также можно установить отступ слева CSS и другие направления отдельно:
margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;
Примечание: Можно использовать для определения отступа px , pts , cm и т.д.
Синтаксис CSS-свойства padding
Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.
Единичное объявление с одним значением:
padding: 50px;
Для каждого направления одиночным объявлением:
padding: 10px 20px 50px 100px;
Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin .
Для каждого направления в отдельности:
padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;
Пример для установки полей и отступов в HTML-списке
Во вступительной части я показал свойства margin и padding , используемые в элементе div . В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div . Он содержит пункты меню в виде гиперссылок.
Список задается и другими свойствами CSS , но без использования свойств HTML margin и padding он будет выглядеть так:
Посмотреть демо-версию и код
padding: 10px;
мы получим следующий вид:
Посмотреть онлайн демо-версию и код
Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:
Посмотреть онлайн демо-версию и код
padding: 10px; margin: 2px; text-decoration: none; color: #fff; background-color: #DA8119; display:block;
Демонстрация полей на примере HTML-таблицы
Ниже приводится пример использования свойства padding в HTML-таблице . Я создал таблицу с несколькими строками.
Для таблицы заданы стили с помощью различных свойств CSS . Сначала посмотрите, как выглядит таблица без применения свойства padding :
Посмотреть демо-версию и код
Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:
Посмотреть демо-версию и код
padding: 20px; border: dashed 1px #DF7000; background: #D0E8AC; color: #000;
Пример использования полей и отступов с элементом form
Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.
Свойство padding , примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.
Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding :
Добавив поля к классу текстовых полей и классу кнопки btn , мы получим форму, выглядящую следующим образом:
Поля для текстовых полей:
padding: 10px;
Поля для кнопки:
padding: 9px 15px;
Посмотреть демо-версию и код
Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin . В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.
margin: -3px;
Поля формы будут выглядеть следующим образом:
Посмотреть демо-версию и код
После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.
Использовав свойство padding , мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.
Для кнопки “ Save ” мы также применили свойство padding :
padding: 9px 15px;
которое используется для выравнивания текста во всех направлениях.
Равные и пропорциональные отступы между ссылками CSS
Нужно задать равный и пропорциональный размерам страницы отступ между ссылками и окном браузера. Также нужно чтобы все это было адаптивным.
Отслеживать
задан 2 янв 2018 в 22:41
85 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков
Нужно? Задайте . В чем именно вы видите проблему?
3 янв 2018 в 0:07
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
.header < display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; >.header a< /*Чтобы ничего не слиплось*/ display:inline-block; padding:10px; > ссылка1 ссылка1 ссылка2 Отслеживать
ответ дан 3 янв 2018 в 7:34
10.4k 2 2 золотых знака 15 15 серебряных знаков 36 36 бронзовых знаков
Большое спасибо. Только для адаптивности я изменил пиксели на нужное число %.
3 янв 2018 в 10:06
Да не за что. Я бы, кстати, не советовал задавать поля и отступы(особенно вертикальные) в процентах.
3 янв 2018 в 10:22
- html
- css
- веб-программирование
- адаптивная-верстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Пробелы между ссылками как поставить?
Как изменить расстояние между ссылками?
Здравствуйте, надеюсь кто-нибудь увидет это сообщение. Суть вопроса: с расстоянием в тексте все.
Как сделать отступы между ссылками?
Здравствуйте. Имеется следующий код: <div <a.
Как сделать пробел между ссылками?
Ребята помогите пожалуйста! я в этом деле начинающий и я не знаю как сделать пробел между ссылками.
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
padding,margin
1525 / 494 / 58
Регистрация: 10.04.2009
Сообщений: 8,368
напишу покороче, куда padding,margin ставить
a href="Прочесть" title="Скачать">1 Скачать/a> a href="Punto.exe" title="Скачать файл">2 Скачать/a>
293 / 169 / 29
Регистрация: 16.09.2012
Сообщений: 370
a {margin: 0 20px;}
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
ну это уже перебор.
Это основа верстки.
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
пробелы символами — это не кошерно ( хотел по другому объснить, но форум не читает символы utf-8)
1525 / 494 / 58
Регистрация: 10.04.2009
Сообщений: 8,368
Сообщение от conformist 
**▲*
▲*▲
на тему пробелов символами
Сообщение от StopSmell
это ж у всех, а мне надо три ссылки вряд, то есть два пробела
293 / 169 / 29
Регистрация: 16.09.2012
Сообщений: 370
1 2 3 4 5
div class="links"> a href="Прочесть%20перед%20установкой.doc" title="Скачать файл">1 Скачать файл Прочесть перед установкой.doc/a> a href="Punto%20Switcher%202.9.5.0.exe" title="Скачать файл">2 Скачать файл Punto Switcher 2.9.5.0.exe/a> a href="/replace.dat" title="Скачать файл">3 Скачать файл replace.dat/a> /div>
1 2 3
.links a+a { margin-left: 20px; }
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
Сообщение от Ципихович Эндрю
a {margin: 0 20px;}
это для всех ссылок. если нужно для определенных ссылок — заключите их в блок див, к примеру div и получите то, что нужно:
1 2 3 4 5
div id="div"> a href="#">ссылка1/a> a href="#">ссылка2/a> a href="#">ссылка3/a> /div>
1 2 3
#div a{ margin: 0 20px; }
1525 / 494 / 58
Регистрация: 10.04.2009
Сообщений: 8,368
в обоих последних вариантах от StopSmell и от conformist текст ссылок отсутствует
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
то есть как? можно код и скрин?
1525 / 494 / 58
Регистрация: 10.04.2009
Сообщений: 8,368
скрин не могу
вот на сайте
Можно скачать нужные три файла отдельно
Для тех кто не знает как скачивать файлы с интернета — пользуйтесь браузером Opera
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
p>Можно скачать нужные три файла отдельно/p> div id="div"> p> a href="Прочесть%20перед%20установкой.doc" title="Скачать файл">1 Скачать файл Прочесть перед установкой.doc/a> a href="Punto%20Switcher%202.9.5.0.exe" title="Скачать файл">2 Скачать файл Punto Switcher 2.9.5.0.exe/a> a href="/replace.dat" title="Скачать файл">3 Скачать файл replace.dat/a> /p> /div> p>Для тех кто не знает как скачивать файлы с интернета - пользуйтесь браузером Opera/p>
Добавлено через 1 минуту
и ксс
1 2 3 4
/*селектор идентификатора*/ #div a{ margin: 0 20px; }