Difference between content-box and border-box, bordercontent
-
Content-box:
-
Padding and border are not included in the defined width and height. The actual width of the object is equal to the sum of the Set width value and border and padding, that is, (Element width = width + border + padding)
-
This attribute is represented in the Box Model in standard mode.
-
Border-box:
-
Padding and border are included in the defined width and height. The actual width of the object is equal to the configured width value. Even if border and padding are defined, the actual width of the object is not changed, that is, (Element width = width)
-
This attribute is represented in the Box Model in the weird mode.
Example:
- Content-box:
. Test1 {box-sizing: content-box; width: 200px; padding: 10px; border: 15px solid # eee ;}
- Border-box:
. Test2 {box-sizing: border-box; width: 200px; padding: 10px; border: 15px solid # eee ;}
