CSS :: Свойство box-sizing

css-свойство box-sizing (от англ. box sizing – расчет размеров блока) используется для установки алгоритма расчета ширины и высоты элементов.

Характеристики

Значение по умолчанию: content-box.
Применяется: ко всем элементам, которые могут иметь ширину и высоту.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.boxSizing="value".

Синтаксис

box-sizing: content-box | border-box

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-ui-3/#box-sizing

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/box-sizing

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 300px;
		height: 100px;
		margin: 20px;
		padding: 20px;
		border: 10px solid green;
		}
		
		.p_1{box-sizing: content-box;}
		
		.p_2{box-sizing: border-box;}

	</style>
	
</head>
<body>
	<p class="p_1">box-sizing: content-box;</p> 
 
	<p class="p_2">box-sizing: border-box;</p>
 </body>
</html>

Пример №1