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

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

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


У этого элемента высота 50 пикселей и ширина 100%.


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

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

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

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

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

Примеры

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


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


У этого элемента высота 200 пикселей и ширина 50%

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


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


У этого элемента высота 100 пикселей и ширина 500 пикселей

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

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

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

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

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

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

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


У этого элемента высота 100 пикселей и максимальная ширина 500 пикселей

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

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

Пример

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


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

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

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