Demo of the different values of the box-sizing property.
Click the property values below to see the result:
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 ❯