CSS3 Box Sizing

CSS3 Box sizing property is used to change the height and width of element.

<style>
      .div2 {
            width: 350px;
            height: 150px;
            padding: 55px;
            border: 3px yellow;
            box-sizing: border-box;
         }
      </style>

CSS3 Box sizing property

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

* {
    box-sizing: border-box;
} 

Box-sizing by default

• width + padding + border = actual visible/rendered width of an element’s box
• height + padding + border = actual visible/rendered height of an element’s box

Means when you set the height and width, it appears little bit bigger then given size cause element boarder and padding added to the element height and width.

.div1 {
    width: 350px;
    height: 150px;
    border: 3px solid black;
}