box-sizing: border-box | content-box | inherit
|
Value
|
Description
|
content-box
|
The default content-box specifies that element size is defined by adding the border, padding, and height/width together to define the size of the box, which is what is typically seen in browsers.
|
border-box
|
When set to border-box, a supporting browser will render the box by the defined height and width properties, pulling the border and padding size from within the box, similar to much older box model thinking.
|
<!DOCTYPE html>
<html> <head> <style> #ex1 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100px; width: 200px; background-color: orange; border: 10px solid red; padding: 10px; } #ex2 { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 100px; width: 200px; background-color: orange; border: 10px solid red; padding: 10px; } </style> </head> <body> <h1>clone</h1> <div id="ex1">This is a div with id ex1 Lorem ipsum dolor sit amet consectetur </div> <br> <div id="ex2">This is a div with id ex2 Lorem ipsum dolor sit amet consectetur </div> </body> </html> |