CSS3 Box Sizing, TutorialsPoint, CSS3 Box Sizing Tutorial

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.

CSS3 Tutorial