DIV tags and padding issues (why is padding moving my DIVs?)

Why is “padding” moving my DIV containers?

GOD DAMN IT !!!

I don’t get it. I thought padding was the distance between the inner div and the text.

"The padding clears an area around the content (inside the border) of an element."
http://www.w3schools.com/css/css_padding.asp

"A padding is the space between an element's border and the content within it."
http://www.tizag.com/cssT/padding.php

So why is it increasing the size of the div tag?

Internet Explorer, Firefox anybody?

Here is the work around but frankly this is stupid.

1. Using a <p> tag within your DIV

<div>
        <p style="padding:10px">        </p>
</div>

2. Using a Div within a Div

<div>
        <div style="padding:10px">        </div>
</div
 
Per Stuffs that i found online the width and the height 
of div tags can be calculated using the formulas below:

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

height = 
border-top + 
padding-top + 
height + 
padding-bottom + 
border-bottom

Let's share thisShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn