Минимальная высота элемента: min-height

min-height

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 3.0 7.0 4.0 2.0.2
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.1.2 1.0.1 7.5 12.0 6.1.3
Свойство
min-height — это свойство задает минимальную высоту блочного элемента
Описание

Каждый элемент на странице представляет собой блок, этот блок имеет несколько составляющих — поля, границы, отступы и непосредственно сам контент:

Поля — margin

Границы — border

Отступы — padding

Контент

Каждая составляющая блока имеет четыре стороны, эти стороны имеют следующие названия:

width

Минимальная высота рассчитывается следующим образом:

таким образом если элементу присвоить следующее правило:

то высота будет равняться:

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К блочным элементам (кроме таблиц) и замещаемым встроенным элементам (к таким элементам относятся, например, изображения)

Существует возможность сделать из строчного элемента блочный, для этого к строчному элементу нужно применить свойство display со значением block

Может принимать значения
значение в абсолютных единицах | значение в относительных единицах | inherit
Значение по умолчанию
0
Правила записи
свойство: значение;
Примеры

<p>

Минимальная высота этого абзаца 150 пикселей + ширина границ

</p>

<p>

Высота этого абзаца 6em + ширина границ

</p>

<div>

<p>Минимальная высота этого абзаца 50% от родительского элемента, в данном случае родительским элементом является контейнер div</p>

</div>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться