Размеры элементов

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию - auto, можно явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

width: 150px;
width: 75%;
height: 15em;
			

Фактические размеры элемента могут отличаться от тех, которые установлены в свойствах width и height. В реальности значение свойства width - определяет только ширину внутреннего содержимого элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin).

С помощью дополнительного набора свойств можно установить минимальные и максимальные размеры:

	
		min-width: минимальная ширина
			
		max-width: максимальная ширина
			
		min-height: минимальная высота
			
		max-height: максимальная высота
		

min-width: 200px; width:50%; max-width: 300px; В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:

content-box: значение свойства по умолчанию, при котором браузер для определения реальных ширины и высоты элементов добавляет к значениям свойств width и height ширину границы и внутренние отступы

padding-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего значения.