I came across on setting an image location using CSS “margain” inside a table cell, it looks allright on IE 7.0 or 8.0, however the firefox 3.X brower is not taking the margain at all.

See problem below:
The product detail image is the backgroud image and on top of that is the product image, which i use “margin-top” to set the location.

I was using: <div align=”center” style=”margin-top: 20px;”><img src=”pic1″ border=”0″></div>

The fix:
I should use padding-top: 20px instead of margin!

Why?

See below from firebug:

The golden rules on using ”margin” and “padding” on CSS.

1. Padding push everything inside the box(text or image).
2. Margin push everything away outside the box(text or image).