Demo of the different values of the box-sizing property.
To stop the demo, click one of the possible values.
Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.
Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.
Play more with the code in our Tryit yourself editor: Try it Yourself ❯