html.okpython.net
HTML и CSS для начинающих

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

Размеры элементов и css-свойства width и height

Высоту и ширину элементов можно задать при помощи ненаследуемых свойств height и width, которые в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Кроме того, свойства принимают значение auto, которое используется браузером по умолчанию и сообщает ему о том, что высоту и ширину элемента нужно устанавливать автоматически таким образом, чтобы в нем поместилось все его содержимое. Применение этих свойств к строчным элементам не будет иметь никакого эффекта. Также не будет иметь эффекта установка ширины для строк таблицы и высоты для колонок таблицы.

css-свойство box-sizing

По умолчанию, говоря о высоте и ширине, имеются в виду размеры области содержимого элемента, которые не включают в себя внутренние отступы и границы элемента (см. рисунок №1). Если же требуется, чтобы браузер, имея дело со свойствами height и width, интерпретировал их значения по другому, необходимо использовать свойство box-sizing, которое может принимать следующие значения:

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

Рис №1. Общая схема элемента

Установка предельных значений размеров элементов,
css-свойства min-width, min-height, max-width, max-height

Также имеются возможности для указания минимально и максимально допустимых значений высоты и ширины. Для этого предназначены ненаследуемые свойства min-height и min-width, max-height и max-width (см. пример №2). Если высота (ширина) элемента будет меньше, чем значение свойства min-height (min-width), то браузер отдаст приоритет значению свойства min-height (min-width). Аналогично, если высота (ширина) элемента будет больше, чем значение свойства max-height (max-width), то браузер отдаст приоритет значению свойства max-height (max-width).

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Размеры элементов</title>
	
	<style>
		.size_1{
		width: 250px;
		height: 15vh;
		background-color: yellow;
		}
		
		.size_2{
		width: 250px;
		height: 150px;
		min-width: 350px;
		max-height: 400px;
		background-color: violet;
		}
	</style>
	
</head>
<body>
	<p class="size_1">
		Ширина абзаца равна 250px, высота &ndash; 15%
		от высоты области просмотра окна браузера.
	</p>
	
	<p class="size_2">
		Ширина абзаца будет 350px, т.к. width меньше min-width,
		а высота &ndash; 150px, т.к height меньше max-height.
	</p>
</body>
</html>

Пример №2. Установка размеров элементов

В конце пункта отметим, что свойства min-height, min-width, max-height и max-width в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Но, в отличие от свойств определения высоты и ширины, они не принимают значение auto.

Быстрый переход к другим страницам

▲
▼