title: Is there a reason why padding adds to the size of an element?
body: <p>I was very surprised when I found that a <code>&lt;div&gt;</code> with a size of - say - 200px becomes 220px wide if you give it 10px padding. It just makes no sense to me, the external size should not change when an internal setting does. It forces you to adjust the size every time you tweak the padding.</p>
  
  <p>Am I doing something wrong, or is there a reason for this behavior?</p>
  
  <p>EDIT: I know this is how it's supposed to work, my question is why? Is it logical in a way I don't understand? Does this give any advantage over the opposite approach of keeping size and padding separate?</p>