YouTip elements have the same specified width and height, the actual rendered size is different because div2 has padding specified:
### Example
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
[Try it Yourself »](
Css3 Box Sizing
# CSS3 Box Sizing
The CSS3 `box-sizing` property allows you to include the padding and border in the width and height of an element.
* * *
## Browser Support
The numbers in the table specify the first browser version that supports the property.
The -webkit- or -moz- prefix coming after the property value is for browser-specific prefixes.
| Property | | | | | |
| --- | --- | --- | --- | --- | --- |
| box-sizing | 10.0 4.0-webkit- | 8.0 | 29.0 2.0-moz- | 5.1 3.1-webkit- | 9.5 |
* * *
## Without CSS3 box-sizing Property
By default, the width and height of an element is calculated as follows:
**width + padding + border = actual width of the element**
**height + padding + border = actual height of the element**
This means that when you set the width/height of an element, the element often appears larger than you have set (because the element's border and padding are added to the element's specified width/height).
This is a smaller box (width is 300px, height is 100px).
This is a larger box (width is 300px, height is 100px).
Although both