CSS имеет несколько свойств для управления размерами элементов, например width, height, max-width, min-width, max-height, и min-height. Это позволяет вам контролировать ширину и высоту элементов. В этом разделе мы рассмотрим, как использовать эти свойства для указания размеров элементам.
Настройка ширины и высоты
Свойства width и height определяют ширину и высоту области содержимого элемента.
Эта ширина и высота не включают отступы (padding), границы (border) или поля (margin). См. Блочную модель в CSS, чтобы узнать, как рассчитывается ширина и высота всего блока элемента.
Рассмотрим следующий пример и посмотрим, как это на самом деле работает:
div {
width: 300px;
height: 200px;
}Приведенные выше правила присваивают элементу <div> фиксированную ширину 300 пикселей и высоту 200 пикселей.
Свойства width и height могут принимать следующие значения:
length— значение указанное вpx,em,rem,pt,cmи т.д.;%— значение в процентах (%) от размера содержащего элемента;auto— браузер автоматически рассчитывает подходящий размер для элемента;initial— устанавливает ширину и высоту в значение по умолчанию, котороеauto;inherit— указывает, что размер должен быть унаследован от родительского элемента.
Нельзя указывать отрицательные значения свойств width и height.
Обычно при создании элемента блока, такого как <div>, <p> и т. д., браузер автоматически устанавливает их ширину равной 100% доступной ширины, а высоту — ту, которая необходима для отображения всего содержимого. Вы должны избегать установки фиксированной ширины и высоты, если в этом нет необходимости.
Настройка максимальной ширины и высоты
Вы можете использовать свойство max-width и max-height, чтобы указать максимальную ширину и высоту области содержимого. Эта максимальная ширина и высота не включает отступы (padding), границы (border) или поля (margin).
Элемент не может быть шире, чем значение max-width, даже если для свойства width установлено большее значение. Например, если width установлена в 300px, а max-width установлена в 200px, фактическая ширина элемента будет 200px. Давайте посмотрим на пример:
div {
width: 300px;
max-width: 200px;
}Если свойство min-width указано со значением, превышающим значение свойства max-width, то будет использовано значение min-width.
Аналогично, элемент, к которому применено max-height, никогда не будет выше указанного значения height, даже если для свойства height установлено большее значение. Например, если height установлено на 200px, а max-height установлено на 100px, фактическая высота элемента будет 100px.
div {
height: 200px;
max-height: 100px;
}Если свойство min-height указано со значением, превышающим значение свойства max-height, то будет использовано значение min-height.
Настройка минимальной ширины и высоты
Вы можете использовать свойство min-width и min-height, чтобы указать минимальную ширину и высоту области содержимого. Эта минимальная ширина и высота не включают отступы (padding), границы (border) или поля (margin).
Элемент не может быть уже значения min-width, даже если для свойства width установлено меньшее значение. Например, если width установлена на 300px, а min-width установлена на 400px, фактическая ширина элемента составит 400px. Давайте посмотрим, как это на самом деле работает:
div {
width: 200px;
min-width: 300px;
}Свойство min-width используется, чтобы гарантировать, что элемент будет иметь по крайней мере минимальную ширину, даже если у него нет содержимого. Элементу будет разрешено нормально «расти», если его содержимое превышает установленную минимальную ширину.
Точно так же элемент, к которому применяется min-height, никогда не будет меньше указанного значения, даже если свойство height имеет значение меньше. Например, если height установлена на 200px, а min-height установлена на 300px, фактическая высота элемента будет 300px.
div {
height: 100px;
min-height: 200px;
}Свойство min-height используется, чтобы гарантировать, что элемент будет иметь хотя бы минимальную высоту, даже если содержимое отсутствует. Элементу будет разрешено нормально «расти», если содержимое превышает минимальную установленную высоту.
Настройка диапазона ширины и высоты
Свойства min-width и min-height часто используются в сочетании со свойствами max-width и max-height для получения диапазона ширины и высоты для элемента.
Это может быть очень полезно для создания гибкого дизайна. В следующем примере минимальная ширина элемента <div> будет 300px, и он может растягиваться горизонтально до максимума 500px.
div {
min-width: 300px;
max-width: 500px;
}Точно так же вы можете определить диапазон высот для элемента. В приведенном ниже примере минимальная высота элемента <div> будет 300px, и он может растягиваться вертикально до максимального значения 500px.
div {
min-height: 300px;
max-height: 500px;
}
