Свойство min-height - это важный инструмент в CSS, который позволяет установить минимальную высоту области для содержимого элемента. Это особенно полезно, когда вы хотите гарантировать, что блок не будет «схлопываться» слишком сильно при изменении контента. Обратите внимание на важный нюанс: итоговая минимальная высота рассчитывается по следующей формуле: min-height + padding (верхний и нижний) + border (ширина рамки). Например, если вы зададите min-height: 500px, padding: 5px и border: 1px, то фактическая минимальная высота составит 512px. Знание этой формулы поможет избежать неожиданных визуальных сдвигов в макете! Важно помнить: CSS свойство min-height работает исключительно с блочными элементами (block-level elements). Для инлайновых элементов оно не применяется. | Значение по умолчанию: | 0 | | Наследуется: | нет | | Версия: | CSS2 | | Синтаксис JavaScript: | object.style.minHeight="10px" | | Значение | Описание | | размер | Устанавливает минимальную высоту в стандартных единицах измерения CSS (px, em, rem и т.д.). | | % | Минимальная высота задается в процентах от высоты родительского элемента. Удобно для адаптивных решений! | | inherit | Наследует значение свойства min-height от родителя. | Пример использования: html head style p { min-height: 100px; background-color: yellow; } /style /head body pМинимальная высота элемента 100px./p /body /html
|