Mastering CSS Box-Sizing: A Comprehensive Guide

By Default the width and height properties defines the size of the context box

which means that padding and border are added outside of the specified

Width and height that you set is applied to context area. padding and border are applied outside.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<link rel="stylesheet" href="style.css">
<body>
    <div class="c-box">
        This is a div with box-sizing: content-box.
      </div>

      <div class="b-box">
        This is a div with box-sizing: border-box.
      </div>

</div>    
</body>
</html>

.c-box
{
  width:200px;
  border:3px solid rgb(96, 79, 194);
  margin-bottom: 20px;
  padding:20px;
}
.b-box
{
  width:200px;
  border:3px solid red;
  padding:20px;
  box-sizing: border-box;

}

Here in the first one we have the padding which is by default content-box

like wise the padding and margin are added outside of the element

let’s calculate how it works

width(200px)+padding(20px)left +padding(20px)right +border (3px) left and border(3px ) on the right side of the element then total area of that will be

246px;

int he second one we have the box-sizing border box then the padding which is applied in the element only

while in border-box it will be applied inside the element no change will be applied to the element actual That is 200px .

Content area shrinks to make room for padding and borders.
The total size of the element remains 200px.

Key-Differences

Content-Box :Total size expands with padding and border.

Border-Box :Total size remains fixed padding and border fit inside the given widt

Understanding CSS Box-Sizing: A Complete Guide

Learn how box-sizing affects element width and height calculations.