CSS Box Sizing

The box-sizing property in CSS is used to control how the width and height of elements are calculated, taking into account padding and border, or just their content.

The box-sizing property allows us to include the padding and border in an element's total width and height.

If you set box-sizing: border-box; on an element, padding and border are included in the width and height:

Content-box (default):

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">Both divs are the same size now!</div>


<div class="div2">Hooray!<

You can click on above box to edit the code and run again.

Output

Both divs are the same size now!

CodeLines!

Border-box:

When box-sizing: border-box; is applied, the width and height properties of an element include padding and border.