Высота блока в CSS — это один из параметров, который отвечает за отрисовку страницы. Согласитесь не очень красиво выглядят элементы страницы, которые непропорционально вытянуты. Их сложно читать, да и в целом они не радуют своим отображением. В этой статье вы научитесь настраивать это свойство таким образом, чтобы установить минимальную высоту, максимальную высоту и стандартную высоту.
CSS — Высота
В принципе, давайте сразу начнем. Данное свойство позволяет настроить высоту. И высоту. И высоту в третий раз. Почему? Потому что у высоты в css есть сразу 3 свойства:
- min-height — минимальная высота блока. То есть блок не станет меньше этой величины.
- max-height — максимальная высота блока. Очень полезно, когда вам необходимо ограничить размер блока.
- height — это стандартная высота блока. Она не может выходить за рамки установленные свойствами min-height и max-height.
Соответственно для правильной работы и отрисовки, лучше всего использовать все 3 свойства. Особенно, если у вас большой сайт. Это будет короткий пост по css, поэтому не удивляйтесь.
Начнем. Есть блок с текстом:
Содержит он следующие стили:
|
1 2 3 4 5 6 7 |
.example { text-align: left; background-color: rgb(247,247,250, 1); padding: 15px; border-radius: 10px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); } |
Теперь давайте добавим параметры максимальной и минимальных высот:
|
1 2 3 4 5 6 7 8 9 10 11 |
.example { width: 20%; text-align: left; background-color: rgb(247,247,250, 1); padding: 15px; border-radius: 10px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); min-height: 50px; max-height: 70px; height: 60px; } |
На выводе увидим следующее:
Согласитесь выглядит не очень красиво, но таким образом мы раскрыли тему назначения высоты для блоков.
Хорошо, давайте причешем, чтоб было все ну совсем красиво:
Теперь надеюсь вас все устраивает 🙂 Если вам интересно, как это было сделано ставьте лайк или пишите комментарий. А пока подписывайтесь на нашу группу в ВК и Канал на ютубе, мы трудимся для вас!