The Math to Element Sizes

The math to 350 px:

  •    320px (width)
  • + 20px (padding: 10 on left, 10 on right)
  • + 10px (border: 5 on left, 5 on right)
  • + 0px (margin: 0 on left, 0 on right)
  • = 350px

To calculate total WIDTH of an element:

  •    width
  • + left padding
  • + right padding
  • + left border
  • + right border
  • + left margin
  • + right margin
  • = total width of element

To calculate total HEIGHT of an element:

  •    height
  • + top padding
  • + bottom padding
  • + top border
  • + bottom border
  • + top margin
  • + bottom margin
  • = total height of element
Good habit

Browsers Compatibility Issue

Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.
Back button Table of Contents Next button