CSS height и width

Установка высоты и ширины

Свойства height и width используются, чтобы установить высоту и ширину элемента.

Свойства height и width могут быть установлены автоматически auto по умолчанию. Означает, что браузер вычисляет высоту и ширину, значение размера указано в px, cm и т.п., или в процентах (%) содержащего блока.

Примечание: Свойства height и width не содержат отступы, границы и поля; они устанавливают высоту и ширину площадки внутри отступов, границ и полей для элемента!

Установка максимальной ширины

Свойство max-width используется, чтобы установить максимальную ширину элемента.

Свойство max-width может быть указано значение размера в px, cm, т.п., или в процентах (%) из содержащего их блока, или значение none по умолчанию - значит, что нет максимальной ширины.

Проблема с элементом <div> выше происходит, когда окно браузера меньше ширины элемента 500 пикселей. После чего, браузер добавляет горизонтальную полосу прокрутки на странице.

Вместо этого используйте свойство max-width, в данной ситуации улучшает управляемость браузера маленьких окон.

Совет: Изменить окно браузера меньше, чем 500 пикселей в ширину, чтобы увидеть разницу между двумя контейнерами!

Примечание: Значение max-width переопределяет свойство width.

В следующем примере показан элемент <div> высота 100 пикселей и максимальная ширина 500 пикселей:

Редактор кода - Примеры

Установить ширину и высоту элементов
В этом примере показано, как задать высоту и ширину различных элементов.

Установить ширину и высоту изображения
В этом примере показано, как задать высоту и ширину изображения, используя процентное значение.

Установить минимальную и максимальную ширину элемента
В этом примере показано, как задать минимальную ширину и максимальную ширину элемента, используя пиксельное значение.

Установить минимальную и максимальную высоту элемента
В этом примере показано, как задать минимальную высоту и максимальную высоту элемента, используя пиксельное значение.

Все CSS свойства размеров