calculate
Standard Box Model
In the standard box model, width and height properties define the dimensions of the content box only.
add_circle
Padding and border are added to the content dimensions
remove_circle
Margin is not included in the box's actual size
space_bar
Margin affects the total space the box occupies on the page
code
Example
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
Total Width = 350 + 25 + 25 + 5 + 5 = 410px
Total Height = 150 + 25 + 25 + 5 + 5 = 210px
visibility
Visual Representation
margin: 10px
border: 5px
padding: 25px
content: 350×150px
Content: 350×150px
Total: 410×210px