CSS свойство box-sizingcss3

CSS свойства

Определение и применение

CSS свойство box-sizing используется для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов.

Схема работы свойства CSS - box-sizing

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
box-sizingcss310.0
4.0
-webkit-
29.0
2.0
-moz-
9.55.1
3.2
-webkit-
8.012.0

CSS синтаксис:

box-sizing:"content-box | border-box | initial | inherit";

JavaScript синтаксис:

object.style.boxSizing = "content-box"

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

ЗначениеОписание
content-boxЗначения свойства ширины (width) и высоты (height), а так же минимальной и максимальной ширины (min-width, max-width), и минимальной и максимальной высоты (min-height и max-height) включают в себя только содержание элемента. Такие свойства как границы (border), внутренние отступы (padding) или внешние (margin) отступы не входят. Это значение по умолчанию.
border-boxЗначения свойства ширины (width) и высоты (height), а так же минимальной и максимальной ширины (min-width, max-width), и минимальной и максимальной высоты (min-height и max-height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding). Внешние отступы (margin), как и при использовании content-box в это число не входят.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS свойства box-sizing</title>
<style> 
div {
display: inline-block;  /*  устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку)  */
width: 150px; /* устанавливаем ширину блока */
height: 150px;  /* устанавливаем высоту блока */
margin: 10px;  /* устанавливаем внешний отступ для всех сторон */
padding: 10px;  /* устанавливаем внутренний отступ для всех сторон */
border: 10px solid green;  /* устанавливаем сплошную границу 10px зеленого цвета */
} 
.test {
box-sizing: content-box; /* ширина и высота элемента включают в себя только содержание элемента (по умолчанию) */
} 
.test2 {
box-sizing: border-box; /* ширина и высота элемента включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
} 
</style>
</head>
	<body>
		<div class = "test">content-box</div>
		<div class = "test2">border-box</div>
	</body>
</html>
Пример использования CSS свойства box-sizing (для изменения, применяемой  по умолчанию  CSS модели, с помощью которой вычисляются ширина и высота элементов).
Пример использования CSS свойства box-sizing (для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов).
CSS свойства