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>

Leave a Comment