The Box-Sizing Property: Difference between Content and Border Boxes

The Box-Sizing Property: Difference between Content and Border Boxes

Want to have boxed elements in your website?

This plug-in gives you option of creating boxed elements as you wish to have them. This plug-in provides you with two options, content box and border box. These two boxes are interesting features and presence of such interesting features will definitely increase the appeal of the website. For a further understanding of this plug-in visit the live demo of this plug-in.

One of the new properties introduced in CSS3 is the box-sizing property. [javascript language="css"]box-sizing: content-box;[/javascript] uses the box-model that everyone is used to, sometimes called the “W3C Box Model”.

While [javascript language="css"]box-sizing: border-box;[/javascript] uses the box-model that people have come to associate with Internet Explorer, where the dimensions of the padding and border are included in the element’s dimensions.

Take a moment to look at the diagram below to get a visual demonstration of the box-sizing property in CSS3.

You can use the [javascript language="css"]box-sizing[/javascript] property on any elements that accept a width or height. Internet Explorer 8+ and Opera 7+ support this property, and you can use [javascript language="css"]moz-box-sizing[/javascript] and [javascript language="css"]webkit-box-sizing[/javascript] to use the property in Firefox and Chrome, respectively.

If you want to know more about this code, you may grab the script at the below link:

To get the version of the script integrated within a live template visit the website whose link is mentioned here:

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

Comments are closed