Руководство CSS box-sizing
View more Tutorials:
CSS Box Modal является контейнером (container) созданным из многих компонентов, включая content (содержание), paddings, margins, borders. Ниже является иллюстративное изображение Box Model:

CSS {box-sizing:content-box}
CSS box-sizing имеет значение по умолчанию это content-box. Это значит элемент по умолчанию является "Context-Box".

В случае, когда элемент является "Content-Box". то CSS width/height будет шириной и высотой прямоугольника, содержащего содержимое элемента, это значит когда элемент устанавливает padding или border (или оба), он увеличивает элемент.
box-model-example.html
<div style="border: 1px solid gray;width:200px;height:100px;"> border: 1px solid gray; <br/> width:200px; <br/> height:100px; </div> <div style="margin: 20px;padding:30px; border: 10px solid gray;width:200px;height:100px;"> margin: 20px; <br /> padding:30px; <br/> border: 10px solid gray; <br/> width:200px; <br/> height:100px; </div>
Реальный размер элемента "Content-Box" расчитан по формуле:
realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottom
При этом:
// box-sizing:content-box (Default): // We have: contentWidth = cssWidth contentHeight = cssHeight
Иногда вы хотите установить border, padding элементу и не хотите увеличивать размер элемента, это вполне возможно если вы используете CSS box-sizing:border-box. Тогда данный элемент считается "Border-Box".

Нсли элемент является "Border-Box", то CSS width/height будет "ширина/высота" прямоугольника включая padding и borders.
box-sizing-border-box.html
<!DOCTYPE html> <html> <head> <title>CSS box-sizing</title> <meta charset="UTF-8"/> <style> .my-box { box-sizing:border-box; width:250px; height:120px; margin: 20px; padding:30px; border: 10px solid gray; } </style> </head> <body> <h3>CSS {box-sizing:border-box;}</h3> <div class = "my-box"> box-sizing:border-box; <br/> width:250px; <br/> height:120px; <br/> margin: 20px; <br/> padding:30px; <br/> border: 10px solid gray; </div> </body> </html>
Примечание: Большинство браузеров не поддерживают CSS box-sizing:padding-box (Или больше не поддерживают).
Если элемент установил CSS box-sizing:padding-box, он считается "Padding-Box". Тогда CSS width/height и есть ширига и высота прямоугольника, содержащего padding, но не включает borders.
