Content Only

“Think Outside the Box” - this has become such a cliche in business, but in CSS you want to stay inside of it. All elements in HTML generate a rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.

Content + Padding

“Think Outside the Box” - this has become such a cliche in business, but in CSS you want to stay inside of it. All elements in HTML generate a rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.

Content + Padding + border

“Think Outside the Box” - this has become such a cliche in business, but in CSS you want to stay inside of it. All elements in HTML generate a rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.

Content + Padding + border + margin

“Think Outside the Box” - this has become such a cliche in business, but in CSS you want to stay inside of it. All elements in HTML generate a rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.

Size of the box = content + padding + border + margin
Content =450px is the width of the div style1-4
Left Padding = 10px
Right Padding = 10px
Left Border = 2px
Right Border = 2px
Left Margin = 10px
Right Margin = 10px
Total = 494px