Content Area
is made up of the width and height of the content
The content has a width of 200px
The content has a height of 200px
Padding Area
extends the content area to include padding around it
The content has a width of 200px
The content has a height of 200px
The padding on each side of the content is 20px
Border Area
extends the content area and padding to include border around it
The content has a width of 200px
The content has a height of 200px
The padding on each side of the content is 20px
The border on each side is 10px
Margin Area
extends the content area, padding, and border to include the margin around it
The content has a width of 200px
The content has a height of 200px
The padding on each side of the content is 20px
The border on each side is 10px
The margin on each side is 20px.
Total width of each box = 300px (200px + 20px + 20px + 10px + 10px + 20px + 20px)
Total height of each box = 300px (200px + 20px + 20px + 10px + 10px + 20px + 20px)