Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
box-sizing: content-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px double #1c87c9;
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px dashed #8ebf42;
}
</style>
</head>
<body>
<h2>Пример box-sizing</h2>
<hr />
<h3>box-sizing: content-box (по умолчанию):</h3>
<div class="div1">Толщина этого div элемента установлена на 400px. Таким образом, общая толщина получится 400px + 10px (левая и правая граница) + 100px (левый и правый отступ) = 510px.</div>
<br>
<h3>box-sizing: border-box:</h3>
<div class="div2">Толщина и высота применяются ко всем частям div элемента:общая толщина - 400px.</div>
</body>
</html>