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

Why is “padding” moving my DIV containers?


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."

"A padding is the space between an element's border and the content within it."

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

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

2. Using a Div within a Div

        <div style="padding:10px">        </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 + 

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

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