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