Высота и ширина элементов в CSS

css

Содержание:



Свойства HEGHT, WIDTH

Свойство Значения Пр* Нc*
height
width
ВЫСОТА (ШИРИНА), %, auto, inherit * -

Свойство Height определяет высоту содержимого элемента.

Свойство Width задаёт ширину содержимого элемента. Оба свойства не учитывают ширину рамки, полей и отступов. Однако для разных случаев браузеры определяют высоту и ширину по-своему. Например, для html5 браузер Chrome прибавляет ширину рамки и отступов к высоте и ширине элемента, а внешнее поле Margin лежит за их пределами и не учитывается.

Область применения*: блочные и замещаемые элементы.

При переполнении области содержимого элемента, оно выступает за его границы. Чтобы подобного не происходило можно применять значение auto или использовать свойство Overflow, которое определяет, что делать с таким содержимым.

Пример:

.element { height: 90px; width: 100px; margin: 15px; padding: 15px; border: 2px solid #000;}
.element { height: auto; width: 100px; margin: 15px; padding: 15px; border: 2px solid #000;}

— в первом случае задана фиксированная высота 90px, а содержимое переполнило область содержимого элемента и вышло за его пределы;
— во втором примере, для высоты установлено значение auto, которое можно аналогично применять и для ширины:

высота и ширина элементов в css

Значения:

Используются принятые единицы CSS.

% — относительно высоты, ширины родительского элемента.
auto — устанавливает высоту, ширину согласно фактической области содержимого элемента.
inherit — наследование свойства родителя.

Свойства max-height, min-height и max-width, min-width

Свойство Значения Пр* Нc*
max-height
max-width
ВЫСОТА (ШИРИНА), %, none, inherit * -
min-height
min-width
ВЫСОТА (ШИРИНА), %, inherit * -

Эти свойства устанавливают максимально и минимально допустимые ширину и высоту элементов. Это может понадобиться, например, для отображения одинаковой высоты блоков с неодинаковой по объёму областью содержимого. Или ограничить максимально допустимую ширину колонки или экрана.

Область применения*: все, кроме строковых незамещаемых элементов и элементов таблиц.

Значения:

Тоже, что и у свойств Height и Width. Начальное значение для свойст Min-height и Min-width — 0.

none — свойство не работает.

Пример:

#sidebar { width: 250px;}
#main { max-width: 1024px;}

— для боковой колонки задана фиксированная ширина;
— для второй, главной, с основным контентом, установлена максимально допустимая, т.е. общая ширина сайта будет «резиновая», но максимум 1024px. Конечно, в примере не учтены возможные отступы, поля и рамки.

Содержание: