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

05.11.2018
2191
Подпишитесь, чтобы получать новые статьи на почту

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

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

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

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

Кнопки

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

.button {
   /* геометрия элемента */
   width: 150px;
   height: 20px;
   /* отступы между кнопками */
   margin-bottom: 5px;
   /* центрируем текст кнопки по вертикали */
   display: flex;
   justify-content: center;
   /* центрируем текст кнопки по горизонтали */
   text-align: center;
   /* чтобы работала геометрия и отступы у тега <a> */
   display: inline-block;
   /* убираем обводку у тега <a> */
   text-decoration: none;
   background-color: red;
   color: #fff;
}

Примеры использования:

<a href="#" class="button">Отправить резюме</a> 
<a href="/" class="button">Очистить форму</a>


Код примера

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


Код примера

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

Проблема

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

Решение

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

.button {
   min-width: 150px;
   /* при жесткой высоте будет увеличиваться ширина */
   height: 20px;
   /* ... остальной код без изменения */
}


Код примера

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

.button {
   /*
      поскольку другое значение border-box не задавалось,
      нужно подкорректировать размеры
    */
   min-width: 140px;
   /* при жесткой высоте будет увеличиваться ширина */
   height: 20px;
   padding: 0 10px;
   /* ... остальной код без изменения */
}


Код примера

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

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

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

<div class="greeting">
 <h1 class="greeting__title">
   Поздравляю, вы стали обладателем квартиры в Сызрани!
 </h1>
</div>

.greeting {
 /* задаём геометрию */
 height: 200px;
 padding: 20px;
 /* центрируем содержимое по вертикали и горизонтали */
 display: flex;
 align-items: center;
 justify-content: center;
 /* учитываем последующее добавление элементов */
 flex-direction: column;
 background: blue;
}
.greeting__title {
 color: #fff;
 font-family: Arial;
 font-size: 20px;
}

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


Код примера

Проблема

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

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

Решение

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

.greeting {
 /* задаём геометрию */
 min-height: 200px;
 padding: 20px;
 /* код без изменения */
}

Код примера

padding > min-*

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

.greeting {
 /* задаём геометрию */
 min-height: 40px;
 /* тут речь идет только о box-sizing:content-box */
 padding: 80px;
 /* код без изменения */
}

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


Код примера

Внешние отступы

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

<div class="greeting">
 <div class="greeting__container">
   <h1 class="greeting__title">
     Поздравляю, вы стали обладателем квартиры в Сызрани!
   </h1>
 </div>
</div>

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

.greeting {
 /* задаём геометрию */
 min-height: 40px;
 /* не задаём никакие отступы в родительском элементе */
 /* код без изменения */
}

.greeting__container {
 margin: 80px;
}

Резюме

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

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

Читать еще: «10 ошибок начинающего верстальщика и как их избежать»


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

Университет интернет-профессий
Мы используем файлы cookie
Чтобы улучшить работу сайта и предоставить вам больше возможностей для обучения. Продолжая использовать сайт, вы соглашаетесь с условиями использования файлов cookie.