Published on: 13 May, 2014

CSS3 Box Sizing

Posted by andy | 1437 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

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

Example 1
Using content-box style



Example 2
Using border-box style



Example 3
Using padding-box style



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>
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.