Box Model Property

It is important to understand how box model widths are calculated.

Use the following equation to determine the width of the containing block:

width = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

• Content - The actual content of the element such as text or an image. When using the CSS width property, you are actually defining the width of this content.

• Padding - This is set around the content when you define the padding-top, padding-right, padding-bottom, padding-left and padding  properties, the latter of which is the   shorthand property.

• Border - This is set around the content and padding when you define the border-top, border-right, border-bottom, border-left and border properties, the latter of which is the shorthand property.

• Margin - This is set around the combined content, padding and border when you define the margin-top, margin-right, margin-bottom, margin-left and margin

*(Width cannot be inherited)

Picture:

Source: http://jessey.net/simon/articles/003.html

http://www.w3schools.com/css/pr_dim_width.asp