CSS Высота и Ширина
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
Попробуйте сами »
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 | Устанавливает ширину элемента |