CSS Высота и ширина
Попробуйте сами »
CSS Настройка высоты и ширины
Свойства height
и width
используются для установки высоты и ширины элемента.
Свойства высоты и ширины не включают padding (отступы), border (границы) или margin (поля). Они устанавливают высоту/ширину области внутри отступа, границы и поля элемента.
CSS Значения height/width
Свойства height
и width
могут иметь следующие значения:
auto
- Это по умолчанию. Браузер рассчитывает высоту и ширинуlength
- Определяет высоту/ширину в px, cm и т.д.%
- Определяет высоту/ширину в процентах от содержащего блокаinitial
- Устанавливает высоту/ширину в значение по умолчаниюinherit
- Высота/ширина будут унаследованы от родительского значения
CSS height/width Примеры
Пример
Установите высоту и ширину элемента <div>
:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Пример
Установите высоту и ширину другого элемента <div>:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Примечание: Помните, что свойства height
и width
не включают отступы (padding), границы (border) или поля (margin)! Они устанавливают высоту/ширину области внутри отступа, границы и поля элемента!
Установка максимальной ширины - max-width
Свойство max-width
используется для установки максимальной ширины элемента.
Свойство max-width
можно указывать в значениях длины, таких как px, cm и т.д. или в процентах (%) от содержащего блока или установите значение none (это значение по умолчанию - означает, что максимальная ширина отсутствует).
Проблема с <div>
выше возникает, когда окно браузера меньше ширины элемента (500 пикселей), т.к. браузер добавляет на страницу горизонтальную полосу прокрутки.
Использование max-width
вместо этого в данной ситуации улучшит работу браузера с небольшими окнами.
Совет: Измените окно браузера на ширину меньше 500 пикселей, чтобы увидеть разницу между двумя div-ами!
Примечание: Значение свойства 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 | Устанавливает ширину элемента |