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;
}

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.