Основатель компании 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 так:

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

</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? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

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

</h1>

</div>

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

.greeting {

/* задаём геометрию */

min-height: 40px;

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

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

}

.greeting__container {

margin: 80px;

}

Резюме

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

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

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

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