Border-box and Content-box

First on the code

Css

. Content-box {    width: 100px;     height: 100px;     Border: 1px solid;     padding: 0px 10px;     box-sizing: content-box;} . Border-box {    box-sizing: border-box;}

Html

1 <  class= "Content-box">content-box</div> 2 <  class= "Content-box border-box">border-box</  Div>

• Content-box
• Box width: 1x2 (borderx2) +10x2 (paddingx2) +100 (content-width) =122
  Box Height: 1x2 (borderx2) +0x2 (paddingx2) +100 (content-height) =102

The principle of Border-box

• Border-box
  Box width: 1x2 (borderx2) +10x2 (paddingx2) +78 (content-width) =100
  Box Height: 1x2 (borderx2) +0x2 (paddingx2) +98 (content-height) =100

Border-box and Content-box