Ширина содержимого: свойство 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;