As you know many browsers treat margin and padding differently. When you combine with width or height of an element box, you find out that the final dimension is completely different when you view with different browser. Well, this now can be easily taken care by using the new CSS box-sizing property. In CSS3, box-sizing property is used to define the dimension of its element by combining the size of padding, content or border. There are types of box-sizing available. They are as follow:

1. content-box

The height and width properties will only include size dimension only. Padding, margin and border dimension are not included.

2. border-box

The height and width properties will only include padding and border dimension only.

3. padding-box

The height and width properties will only include include padding dimension only.

Example of CSS3 box-sizing

Style sheet codes

<style type="text/css">
	.content-box{
		width:240px;
		height:70px;
		margin:10;
		padding:10px;
		border:5px solid #ccc;
		box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		background:#365be8;
		color:#fff;
		text-transform:uppercase;
		text-align:center;
	}

	.border-box{
		width:240px;
		height:70px;
		margin:10;
		padding:10px;
		border:5px solid #ccc;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		background:#365be8;
		color:#fff;
		text-transform:uppercase;
		text-align:center;
	}

	.padding-box{
		width:240px;
		height:70px;
		margin:10;
		padding:10px;
		border:5px solid #ccc;
		box-sizing: padding-box;
		-webkit-box-sizing: padding-box;
		-moz-box-sizing: padding-box;
		background:#365be8;
		color:#fff;
		text-transform:uppercase;
		text-align:center;
	}
</style>