How do I get a consistent padded border around a thumbnail image?

Posted September 12, 2004

This is the question I have been asking for a couple of days now. I would like to have some images with padding between the image and the border. As of right now I have added white space around the actual image, which doesn’t seem like a semantic way of doing things. This is example code of what I am writing to try to get a border

div#example img{

margin:3px 3px;

padding:3px 3px;

}

For beginners, you will notice that I wrote only two values for both the margin and padding. This is shorthand. I also could have wrote,

div#example img{

margin:3px;

padding:3px;

}

Each produces the same result. The bottom example will add the same amount of pixels for each dimension. The above example you can specify one value for the top/bottom and left/right side measurements, in that order. Of course, there is always the long hand, if you want to specify different values for each.

div#example img{

margin:3px 2px 4px 1px;

padding: 3px 2px 4px 1px;

}

Margin is the space around the outside of an object in relation to other objects, and padding is the space you specify for that object.

But I have found that in Mozilla / Netscape browsers, Margin acts like Padding does in IE. But I still can’t figure out why IE doesn’t recognize padding around an image to create a spaced border, while Mozilla Netscape does the effect with the margin property.