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

Обучение в онлайн-университете: курс “HTML-верстка: с нуля до первого макета

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

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

Кнопки

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

.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 ошибок начинающего верстальщика и как их избежать


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

©