Высота и ширина

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

CSS свойство max-width позволяет установить максимальную высоту HTML элемента.

Определение высоты и ширины

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

Свойства height и width не учитывают поля, рамки или отступы элемента. Они устанавливают высоту/ширину области содержимого внутри полей, рамок и отступов элемента.

Свойства height и width могут принимать следующие значения:

• auto - Значение по умолчанию. Высоту и ширину вычисляет браузер
• ширина - Значение в единицах измерения длины (px, pt, cm и т.д.)
• % - Значение в процентах от содержащего блока
• initial - Устанавливает высоту/ширину в значение по умолчанию
• inherit - Значение будет наследоваться от родительского элемента

Примеры

Установим высоту и ширину элемента <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Установим высоту и ширину другого элемента <div>:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Внимание! Помните, что свойства height и width не включают поля, рамки или отступы элемента! Они устанавливают высоту/ширину области содержимого внутри полей, рамок и отступов элемента!

Определение максимальной ширины

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

Допустимые значения max-width

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

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

Если же в этом случае вместо width использовать свойство max-width, то ситуация улучшиться.

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

Внимание ! Если вы по каким-либо причинам с одним и тем же элементом используете и свойство width и свойство max-width, и при этом значение width больше значения max-width, то использоваться будет свойство max-width (свойство width будет игнорироваться).

Пример

У этого элемента <div> будет высота 100 пикселей и максимальная ширина 500 пикселей:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Все CSS свойства определения размеров