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

Ширина содержимого: свойство width.

С помощью свойства width можно задать ширину содержимого блока. Данное свойство нельзя применить к строчным элементам. Ширина содержимого строчных элементов определятся исходя из ширины их одержимого.

!!! Отрицательные значения не допускаются.

!!! Свойство не наследуется дочерними элементами.

Значения свойства width:

длина: ширина элемента в единицах длины (px, em и тп);
% (процент): значение вычисляется в процентах относительно ширины содержащего блока;
auto: ширина вычисляется автоматически в зависимости от других свойств. Является значением по умолчанию;
inherit: наследует значение свойства от родительского элемента.

Синтаксис свойства:

width: 100px;
width: 10em;
width: 50%;
width: auto;
width: inherit;

Минимальная и максимальная ширина.

Для задания максимальной и минимальной ширины используются свойства max-width и min-width. Они позволяют ограничивать ширину содержимого до определенного диапазона.

!!! Отрицательные значения не допускаются.

!!! Свойство не наследуется дочерними элементами.

Значения свойства min-width/max-width:

длина: ширина элемента в единицах длины (px, em и тп);
% (процент): значение вычисляется в процентах относительно ширины содержащего блока;
auto: ширина вычисляется автоматически в зависимости от других свойств. Является значением по умолчанию;
inherit: наследует значение свойства от родительского элемента.

Синтаксис свойств min-width/max-width:

min-width: 100px;
min-width: 10em;
min-width: 50%;
min-width: inherit;

max-width: 500px;
max-width: 20em;
max-width: 80%;
max-width: none;
max-width: inherit;

Высота содержимого: свойство height

С помощью свойства height можно задать высоту элемента. Оно так же как и свойство ширины не применяется к строчным элементам.

!!! Отрицательные значения не допускаются.

!!! Свойство не наследуется дочерними элементами.

Значения свойства height:

длина: ширина элемента в единицах длины (px, em и тп);
% (процент): значение вычисляется в процентах относительно ширины содержащего блока;
auto: ширина вычисляется автоматически в зависимости от других свойств. Является значением по умолчанию;
inherit: наследует значение свойства от родительского элемента.

Синтаксис свойств height:
height: 100px;
height: 10em;
height: 50%;
height: auto;
width: inherit;

Минимальная и максимальная высота.

Свойства min-height и max-height позволяют создать диапазон высоты элемента с ограничениями.

!!! Отрицательные значения не допускаются.

!!! Свойство не наследуется дочерними элементами.

Значения свойств min-height/max-height:

длина: ширина элемента в единицах длины (px, em и тп);
% (процент): значение вычисляется в процентах относительно ширины содержащего блока;
auto: ширина вычисляется автоматически в зависимости от других свойств. Является значением по умолчанию;
inherit: наследует значение свойства от родительского элемента.

Синтаксис свойств min-height/max-height:

max-height: 500px;
max-height: 20em;
max-height: 80%;
max-height: none;
max-height: inherit;

min-height: 100px;
min-height: 2em;
min-height: 50%;
min-height: inherit;