CSS3 Box Sizing
The CSS3 box-sizing property allows us to include the  width, height, padding and border elements .

width + padding + border = actual width of an element

height + padding + border = actual height of an element

Example :
	
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Box Sizing</title>
<style type="text/css">
 
.width_height_border{ 
width:250px; 
height:120px; 
border:1px solid #0099da;
}
 
.width_height_padding_border{ 
width:250px; 
height:120px; 
border:1px solid #0099da; 
padding:30px;
}
 
</style>
 
</head>
<body>

<p class="width_height_border">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>

<p class="width_height_padding_border">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>

</body>
</html>       
Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.