css box-sizing

Other jsfiddle box-sizing test.

box-model

http://css-tricks.com/box-sizing/

Box models

• In the W3C box model, the width of an element gives the width of the

  content of the box, excluding padding and border.

• In the traditional box model, the width of an element gives the width

  between the borders of the box, including padding and border.

You can set width 100% and adding some padding and borders and width will be 100% of parent element without adding padding and borders to it.

<style>

.box-sizing {

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

</style>

There are two options for "box-sizing":

<style>

.box-sizing {

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	/* or this one */

	-moz-box-sizing: content-box;

	box-sizing: content-box;

}

</style>