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