CSS

box sizing ftw

html {
	box-sizing: border-box;
}

*, 
*:before, *:after {
	box-sizing: inherit;
}

box-sizing border-box vs content-box css

box-sizing:content-box;
	"Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included"
box-sizing:border-box;	
	"The width and height properties (and min/max properties) includes content, padding and border"

* box-sizing border-box

*{
box-sizing: border-box;
}

box sizing

html {
	box-sizing: border-box;
}

*, 
*:before, *:after {
	box-sizing: inherit;
}

box sizing border box

*{
 box-sizing: border-box;
 }

css box sizing

box-sizing: border-box;
box-sizing: content-box;

/*content-box gives you the default CSS box-sizing behavior. If you set an element's
width to 100 pixels, then the element's content box will be 100 pixels wide, and 
the width of any border or padding will be added to the final rendered width, making 
the element wider than 100px. 

border-box tells the browser to account for any border and padding 
in the values you specify for an element's width and height. */

box-sizing border-box not working

you need to inspect your element and see the difference to the element width
after applying box-sizing: border-box

CSS Box Sizing

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

box-sizing

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

boxsizing

Sintaxe formal: 
content-box | (en-US) border-box

what happens when the width is 0 and there is a border and box-sizing is set to border-box?

The content area is anything left after you subtract the width of the border.

    | The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

Specified width = 10 px
border width = 10 px
Content width = Specified width (10 px) - border width (10 px)
Content width 10 - 10 = 0

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = -10 ( which would remove the 10 px used by the border)

But

    | As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = 0 ( which doesn't remove the 10 px used by the border)

If you don't want to use display:none; or visibility:hidden;, you need to set both the width:XX; and the border-right:XX; to zero.

CSS Box-Sizing

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}