Box-sizing

The CSS box model used to calculate the width and height of elements.

Syntax
           box-sizing: content-box | border-box  ;
      -moz-box-sizing: content-box | border-box | padding-box ;

Key
  content-box  The width and height properties represent only the dimensions of the content.
               They don’t include the border, margin, or padding (Default  CSS 2 box model.)

  border-box   The width and height properties represent the sum of the content + padding size + border size,
               but don’t include the margin. (Default IE 5 box model.)

  padding-box  The width and height properties include the content + padding size,
               but don’t include the border or margin.

  inherit      Inherit the property from a parent element.

Box-sizing works with min-width / max-width / min-height / max-height with one exception, in Firefox versions prior to v17 (November 2012) min-height and max-height don't respect box-sizing.

When border-box is applied to a <textarea> it will prevent padding and border from expanding the elements width beyond 100% .

Examples:
h1 { box-sizing: border-box; }
.ss64class { box-sizing: content-box; }
#ss64id { box-sizing: border-box; }

Try it:

Box 1
Box 2
Box 3

(CSS 3) Browser Support: IE, Opera, and Chrome, use the equivalent -moz-box-sizing for Firefox and -webkit-box-sizing for Safari.

“People who know little are usually great talkers, while men who know much say little” ~ Jean Jacques Rousseau

Related:

box sizing and inheritance - CSS Tricks
The CSS Box Model - Borders, Padding and Margins.
box-shadow - Attach one or more drop-shadows to the box.
max-height - Maximum height of an element
min-height - Minimum height of an element
max-width - Maximum width of an element
min-width - Minimum width of an element


© Copyright SS64.com 1999-2014
Some rights reserved