Как сделать расстояние между кнопками в css
Перейти к содержимому

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

  • автор:

Как создавать адаптивные кнопки и блоки в CSS

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «Старт в программировании»

Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:

  • правка дополнительного содержимого не затрагивала ранее написанные стили;
  • при добавлении нового содержимого макет отображался корректно.

Кнопки

Создадим кнопку общего назначения:

/* отступы между кнопками */

/* центрируем текст кнопки по вертикали */

/* центрируем текст кнопки по горизонтали */

/* чтобы работала геометрия и отступы у тега */

/* убираем обводку у тега */

Как создавать адаптивные кнопки и блоки в CSS

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:

Как создавать адаптивные кнопки и блоки в CSS

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

/* при жесткой высоте будет увеличиваться ширина */

/* … остальной код без изменения */

Как создавать адаптивные кнопки и блоки в CSS

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

поскольку другое значение border-box не задавалось,

нужно подкорректировать размеры

/* при жесткой высоте будет увеличиваться ширина */

/* … остальной код без изменения */

Как создавать адаптивные кнопки и блоки в CSS

Блоки страницы

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

Как создавать адаптивные кнопки и блоки в CSS

Лучше всего оформить это в CSS так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

/* центрируем содержимое по вертикали и горизонтали */

/* учитываем последующее добавление элементов */

Вот что у нас получилось:

Как создавать адаптивные кнопки и блоки в CSS

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Как создавать адаптивные кнопки и блоки в CSS

Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Ставим min-height и отступы на случай, если содержимого станет слишком много:

/* код без изменения */

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

/* тут речь идет только о box-sizing:content-box */

/* код без изменения */

Начальное поведение у элементов в обоих случаях будет одинаковым, а вот поведение при превышении минимального значения контейнера — разным.

Как создавать адаптивные кнопки и блоки в CSS

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

И так тоже не делайте:

/* не задаём никакие отступы в родительском элементе */

/* код без изменения */

Резюме

  • Для всего, что может измениться, задавайте минимальные и максимальные размеры.
  • Добавляйте отступы для корректного отображения.

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Средняя оценка 3 / 5. Всего проголосовало 2

Пространство между

Утилиты для управления пространством между дочерними элементами.

Show all classes

Контролируйте расстояние между элементами по горизонтали с помощью утилит space-x- .

div class="flex space-x-4 . "> div>01div> div>02div> div>03div> div>

Контролируйте расстояние между элементами по вертикали с помощью утилит space-y- .

div class="flex flex-col space-y-4 . "> div>01div> div>02div> div>03div> div>

Если Ваши элементы расположены в обратном порядке (например, flex-row-reverse или flex-col-reverse ), используйте утилиты space-x-reverse или space-y-reverse , чтобы обеспечить свободное пространство, добавив к правильной стороне каждого элемента.

div class="flex flex-row-reverse space-x-4 space-x-reverse . "> div>01div> div>02div> div>03div> div>

To use a negative space value, prefix the class name with a dash to convert it to a negative value.

div class="flex -space-x-4 . "> div>

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

В таких ситуациях лучше использовать утилиты промежутков, когда это возможно, или добавлять поля к каждому элементу с соответствующим отрицательным полем родительского элемента:

div class="flow-root"> div class="-m-2 flex flex-wrap"> div class="m-2 . ">div> div class="m-2 . ">div> div class="m-2 . ">div> div> div>

Утилиты space-* не предназначены для совместной работы с утилитами разделения. В таких ситуациях рассмотрите возможность добавления утилиты полей/заполнения к дочерним элементам.

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : space-x-8 , чтобы применять утилиту space-x-8 только при hover .

div class="flex space-x-2 hover:space-x-8"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: space-x-8 , чтобы применить утилиту space-x-8 только на экранах среднего размера и выше.

div class="flex space-x-2 md:space-x-8"> div> 

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

Как сделать расстояние между кнопками 1-2 px по вертикали?

Лучший ответ

В css для верхней кнопки напиши margin-bottom: 2px;

mckentМастер (1398) 4 года назад

Спасибо, помогло.

Николай Захаров Мыслитель (6265) Не за что

Остальные ответы

смотря какими

margin
если в ul li используй padding

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Увеличить кнопки и расстояние между ними блок «Поделиться» Яндекс

Возможно-ли увеличить размер и расстояние между кнопками в блоке «Поделиться» Яндекс. В мобильной версии очень маленькие кнопки и расстояние (по горизонтали) маленькое не удобно нажимать, задевается ближняя кнопка. Код:

Отслеживать
29.3k 1 1 золотой знак 21 21 серебряный знак 43 43 бронзовых знака
задан 2 фев 2020 в 20:29
97 1 1 серебряный знак 9 9 бронзовых знаков

1 ответ 1

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

CSS вам в помощь. Можете добавить медиа-запросы для кастомизации под разные размеры экранов.

.ya-share2__item < margin-right: 24px !important; >.ya-share2__icon

Отслеживать
ответ дан 2 фев 2020 в 21:53
29.3k 1 1 золотой знак 21 21 серебряный знак 43 43 бронзовых знака
@teranБлагодарю работает.
3 фев 2020 в 11:49

  • javascript
  • ya-share2
    Важное на Мете
Похожие

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

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

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

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

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