# Свойство min-height

Свойство `min-height` устанавливает минимальную высоту элемента. Значением свойства служат любые единицы для размеров либо ключевое слово `none`, означающее отсутствие значения.

Обычно задается для элемента с плавающей шириной (высота задана в процентах или не задана вообще, а элемент по высоте раздвигается своим содержимым).

Если задана минимальная высота - то меньше этой высоты элемент не сможет стать. Если текста меньше, чем нужно для `min-height`, элемент будет иметь высоту `min-height`.

Если же текста больше - высота элемента вычислится в зависимости от количества текста.

## Синтаксис

`селектор { min-height: значение; }`

## Пример

В данном примере высота не установлена вообще и будет рассчитана браузером самостоятельно в зависимости от количества текста. Однако, так как установлено свойство `min-height`, то высота меньше этого значения не уменьшится, даже если текста в нем совсем не будет:

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { min-height: 100px; width: 300px; border: 1px solid black; }`

:

## Пример

Давайте добавим элементу больше текста - так, чтобы произошло переполнение блока по высоте. В этом случае наш блок просто увеличит свою высоту:

`<div id="elem"> какой-то длинный текст... </div>` `#elem { min-height: 100px; width: 300px; border: 1px solid black; text-align: justify; }`

:

## Пример

Для сравнения давайте посмотрим, что будет с блоком, если убрать ему минимальную высоту, а вместо нее задать свойство `height`:

`<div id="elem"> какой-то длинный текст... </div>` `#elem { height: 100px; width: 300px; border: 1px solid black; text-align: justify; margin-bottom: 50px; }`

:

## Смотрите также

- свойство `max-height`,
  которое задает максимальную высоту элемента
- свойство `max-width`,
  которое задает максимальную ширину элемента
- свойство `min-width`,
  которое задает минимальную ширину элемента

←→
↑