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

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

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

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

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

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

Кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

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

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

How to give spacing between buttons using bootstrap

I want to give spacing between buttons is there a way to give spacing using bootstrap so that they will be consistent for different screen resolutions.

I tried using margin-left But is it the correct way to do this.

12 Answers 12

You can achieved by use bootstrap Spacing. Bootstrap Spacing includes a wide range of shorthand responsive margin and padding. In below example mr-1 set the margin or padding to $spacer * .25.

You can read more at Bootstrap Spacing.

It varies according to bootstrap version

If you are using

Bootsrap 4

Bootstrap 5

1. Wrap your buttons in a div with class=’col-xs-3′ (for example).
2. Add class=»btn-block» to your buttons.

This will provide permanent spacing.

If you want use margin, remove the class on every button and use :last-child CSS selector.

Html :

Css :

I am pretty bad at html but I used &nbsp; between the buttons and it worked well.

Depends on how much space you want. I’m not sure I agree with the logic of adding a «col-XX-1» in between each one, because you are then defining an entire «column» in between each one.

If you just want «a little spacing» in between each button, I like to add padding to the encompassing row. That way, I can still use all 12 columns, while including a «space» in between each button.

Use btn-primary-spacing class for all buttons remove margin-left class

CSS will be like :

You can use built-in spacing from Bootstrap so no need for additional CSS there. This is for Bootstrap 4.

The original code is mostly there, but you need btn-group s around each button. In Bootstrap 3 you can use a btn-toolbar and a btn-group to get the job done; I haven’t done BS4 but it has similar constructs.

HTML | CSS: пробел между кнопками ввода

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

Код выглядит следующим образом:

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

Браузер: Firefox 3.5

6 ответы

Перевод строки между двумя <input> s создает пространство между ними на странице. Вы должны удалить перевод строки или использовать этот трюк:

Перенос строки вызывает пробел, он имеет в виду набрать его так: вместо того, чтобы размещать их на отдельных строках. — Рянулит

Ставить в одной строке. — БарреттДж.

Извините, если я не использовал четкие слова, английский не мой родной язык. — Пикрасс

Вы не обязаны. Вот трюк, который я использую (немного похожий на трюк Керрика, но, на мой взгляд, более элегантный): <input . /><!— [newline here] —><input . /> — Пикрасс

Использование блока комментариев — плохая замена использованию свойств CSS (float или display), как это делали другие ответы. Это хитрость, и она не поможет решить какие-либо проблемы с выравниванием сетки в будущем. — Рассел

Удивлен, что еще никто не упомянул об этом методе:

Проблема в том, что между двумя кнопками отображается пробел. Любые пробелы (разрывы строк, табуляции, пробелы) между кнопками будут отображаться браузером как единый пробел. Чтобы исправить это, вы можете установить font-size до 0 для родительского элемента.

я добавил DIV#button-container вокруг кнопок и стиль, показывающий font-size трюк.

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

[CSS] Уменьшить/увеличить расстояние между пунктами навигации (меню)

[CSS] Уменьшить/увеличить расстояние между пунктами навигации (меню)

автор Иосиф Виссарионович Июнь 3rd 2009, 16:33

Уменьшить (-)
C помощью данных CSS вы сможете легко уменьшить расстояния между пунктами меню, тем самым сделав его компактнее и аккуратнее:

phpBB2
Код: a.mainmenu {
margin-left:-5px !important;
} phpBB3
Код: ul.navlinks li {
margin-left:-5px !important;
} IPB
Код: #submenu ul li a {
margin-left:-5px !important;
} punBB
Код: #pun-navlinks li a {
margin-left:-5px !important;
}
После применения данных CSS кнопки навигации будут ближе друг к другу на 5px (это значение вы можете устанавливать свой вкус, экспериментируйте!)

Увеличить (+)
Чтобы увеличивать расстояние нужно вместо -5px написать положительное число px т.е. просто 5px

Внимание: данные CSS были проверены на стандартных оформлениях (стилях, скинах) для форумов, их работоспособность на некоторых стилях с под сомнением.

FAQ:
Q: Куда девать эти самые CSS-коды?
A: ПА > Оформление > Цвета > Каскадная таблица стилей CSS

Иосиф Виссарионович