Как сделать расстояние между кнопками в 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.

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

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

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

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

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

Браузер: Firefox 3.5

6 ответы

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

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

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

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

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

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

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

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

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

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

Как расширить расстояние между кнопками меню? — Joomla 1.5: Вопросы по работе с меню

Данная версия знаменует собой важную веху в разработке продукта. Из нововведений: множество улучшений, обеспечение повышенной производительности и расширенные функциональные возможности.

WT Revars insert

Плагин кнопки редактора для вставки шорт-кодов, созданных с помощью плагина Revars.

Статья «Как создать плагин для Joomla 4 для авторизации пользователя по email» (How to Create a.

Статья «Как создать плагин для Joomla 4 для авторизации пользователя по email» (How to Create a Joomla 4 Plugin to Allow User Login with Email)

[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

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