CSS Padding problem: Div height and widht increases when giving the padding to the Div. What is the solutions?

CSS Padding problem: Div height and widht increases when giving the padding to the Div. What is the solutions?

Our Div Css class is :

.mydiv{
width:200px;
height:150px; 
background:green;
padding:10px;
}


Here the output Width is 220px (10px+200px+10px) and Height is 170px (10px + 150px + 10px).
But this is wrong...

The solutions for above Problem is Just give the box-sizing property to the div class. The css code is

.mydiv{
width:200px;
height:150px;
padding:10px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}


Try this,
Thanks