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