CSS box-sizing Property

CSS box-sizing Property


CSS box-sizing Property
This property changes the calculation for measuring the width of elements. 
Syntax -
box-sizing: border-box | content-box | inherit 
 
Now we will see their values with there descriptions -
Value
Description
content-box
The default content-box specifies that element size is defined by adding the border, padding, and height/width together to define the size of the box, which is what is typically seen in browsers.
border-box
When set to border-box, a supporting browser will render the box by the defined height and width properties, pulling the border and padding size from within the box, similar to much older box model thinking.
 
Now we will see the Example -
Example  -
<!DOCTYPE html>
<html>

<head>
  <style>
    #ex1 {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 100px;
      width: 200px;
      background-color: orange;
      border: 10px solid red;
      padding: 10px;
    }

    #ex2 {
      -moz-box-sizing: content-box;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
      height: 100px;
      width: 200px;
      background-color: orange;
      border: 10px solid red;
      padding: 10px;
    }
  </style>
</head>

<body>
  <h1>clone</h1>

  <div id="ex1">This is a div with id ex1 Lorem ipsum dolor sit amet consectetur </div>
  <br>
  <div id="ex2">This is a div with id ex2 Lorem ipsum dolor sit amet consectetur </div>

</body>

</html>
Output -