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

Ширина этого элемента составляет 100%.

CSS установка высоты и ширины

height и width Атрибут используется для установки высоты и ширины элемента.

Атрибуты height и width не включают внутренний отступ, рамку или внешнюю границу. Они устанавливают высоту и ширину области внутри отступа, рамки и внешней границы!

Значения CSS по высоте и ширине

height и width Атрибут может принимать следующие значения:

  • auto - По умолчанию. Браузер рассчитывает высоту и ширину.
  • length - Определяет высоту и ширину в px, cm и т.д.
  • % - Определяет высоту и ширину в процентах от содержимого блока.
  • initial - Устанавливает высоту и ширину по умолчанию.
  • inherit - Имеет высоту и ширину, наследуемые от родительского значения.

Примеры CSS по высоте и ширине

Этот элемент имеет высоту 200 пикселей и ширину 50%

Пример

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

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

Попробуйте сами

Этот элемент имеет высоту 100 пикселей и ширину 500 пикселей.

Пример

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

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

Попробуйте сами

Примечание:Помните,height и width Атрибут не включает внутренний отступ, рамку или внешнюю границу! Они устанавливают ширину и высоту области внутри отступа, рамки и внешней границы!

Установка max-width

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

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

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

В этом случае, используйте max-width Может улучшить обработку браузером маленьких окон.

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

Этот элемент имеет высоту 100 пикселей и максимальную ширину 500 пикселей.

Этот элемент имеет высоту 100 пикселей и максимальную ширину 500 пикселей.

Примечание: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 Установить ширину элемента.