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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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